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>");
            })
        })

 

  • 0
    点赞
  • 5
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值