jQuery延时器插件jquery.mousedelay.js使用案例
  • 分享到微信朋友圈
    X

jQuery延时器jQuery.mouseDelay操作目的是为了防止用户误触发事件,一般情况下鼠标指针小于150毫秒的停留时间都可以被忽略。 jQuery延时器快速划过的操作将会被忽略,同时支持对同类操作进行分组(如:划过下拉菜单面板不会触发按钮离开的事件)

主要js与解析

纯文本
点击复制
Open code in new window
EnlighterJS 3 Syntax Highlighter
<script>
$(".mainnav li").each(function () {
var e = $(this).find(".sub").find("dd").length
if (e >= 1) {
$(this).addClass("has-sub");
$(this).mouseDelay(false).hover(function () {
$(this).find(".sub").slideDown();
}, function () {
$(this).find(".sub").slideUp();
});
}
});
var Unhover = $('#unhover');
// 卸载hover事件
Unhover.click(function () {
$(".mainnav li").unbind();
alert("hover事件已经卸载,转换成点击事件!");
$(".mainnav li").each(function () {
var e = $(this).find(".sub").find("dd").length
if (e >= 1) {
$(this).find("h3").append("<i class='op'></i>");
var op = $(this).find("h3").find(".op")
op.click(function () {
$(this).toggleClass("click");
$(this).parent().next(".sub").slideToggle();
$(this).parents("li").siblings().find(".op").removeClass("click");
$(this).parents("li").siblings().find(".sub").slideUp();
});
}
});
});
</script>
<script> $(".mainnav li").each(function () { var e = $(this).find(".sub").find("dd").length if (e >= 1) { $(this).addClass("has-sub"); $(this).mouseDelay(false).hover(function () { $(this).find(".sub").slideDown(); }, function () { $(this).find(".sub").slideUp(); }); } }); var Unhover = $('#unhover'); // 卸载hover事件 Unhover.click(function () { $(".mainnav li").unbind(); alert("hover事件已经卸载,转换成点击事件!"); $(".mainnav li").each(function () { var e = $(this).find(".sub").find("dd").length if (e >= 1) { $(this).find("h3").append("<i class='op'></i>"); var op = $(this).find("h3").find(".op") op.click(function () { $(this).toggleClass("click"); $(this).parent().next(".sub").slideToggle(); $(this).parents("li").siblings().find(".op").removeClass("click"); $(this).parents("li").siblings().find(".sub").slideUp(); }); } }); }); </script>
Expand
<script>
    $(".mainnav li").each(function () {
        var e = $(this).find(".sub").find("dd").length

        if (e >= 1) {

            $(this).addClass("has-sub");
            $(this).mouseDelay(false).hover(function () {
                $(this).find(".sub").slideDown();
            }, function () {
                $(this).find(".sub").slideUp();
            });
        }
    });

    var Unhover = $('#unhover');
    // 卸载hover事件
    Unhover.click(function () {

        $(".mainnav li").unbind();

        alert("hover事件已经卸载,转换成点击事件!");

        $(".mainnav li").each(function () {
            var e = $(this).find(".sub").find("dd").length
            if (e >= 1) {
                $(this).find("h3").append("<i class='op'></i>");
                var op = $(this).find("h3").find(".op")
                op.click(function () {
                    $(this).toggleClass("click");
                    $(this).parent().next(".sub").slideToggle();
                    $(this).parents("li").siblings().find(".op").removeClass("click");
                    $(this).parents("li").siblings().find(".sub").slideUp();
                });
            }
        });
    });
</script>

接口

  • mouseDelay (speed, group) 速度, 设置延时分组名称 设置延时触发效果. 两个参数都是可选的

  • mouseDelayPause() [无] 冻结选定元素的延时器

  • jQuery.mouseDelay.pause (group) 延时分组名称 冻结指定分组的延时器

  • jQuery.mouseDelay.get () [无] 获取一个不重复的分组名