js解决双击事件屏蔽单击事件

由于鼠标双击时每一次触发双击事件都会引起两次单击事件和一次单击事件,原生的js不提供专门的双击事件。

所以双击时为了屏蔽单击事件,我们引入定时器功能,动态的为每次鼠标单击计时,300ms,300ms内鼠标再次点击会出发双击事件而不走单击事件。上代码:

$(function() {
            var timer = null;
            $("div").bind("click.a", function() { //单击事件 
                clearTimeout(timer);
                timer = setTimeout(function() { //在单击事件中添加一个setTimeout()函数,设置单击事件触发的时间间隔 
                    $("body").append("<p>click事件</p>");
                }, 300);
            })
            $("div").bind("dblclick.a", function() { //双击事件 
                clearTimeout(timer); //在双击事件中,先清除前面click事件的时间处理 
                $("body").append("<p>dblclick事件</p>");
            })
            $("div").bind("mouseover.a", function() { //鼠标经过元素的事件 
                $("body").append("<p>mouseover事件</p>");
            })
            $("div").bind("mouseout.a", function() { //鼠标移出元素的事件 
                $("body").append("<p>mouseout事件</p>");
            })
        })

猜你喜欢

转载自blog.csdn.net/liz9411/article/details/82179956
今日推荐