欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页  >  web前端

jquery事件dblclick与click冲突的解决方法分享

程序员文章站 2022-03-26 15:57:18
...
在jquery中click与dblclick都是一个点击事件，但是在dblclick事件是在click事件上重复点击了，这样如果我们同时的话就冲突了，下面我们来看分析。

在双击事件(dblclick)，触发的两次单击事件(click)中，第一次的单击事件(click)会被屏蔽掉，但第二次不会。

<script type="text/javascript">
$(document).ready(function(){
  $("button").click(function(){
    $("p").slideToggle();
  });
});
</script>
</head>
<body>
<p>这是一个段落。</p>
<button>切换</button>
</body>

也就是说双击事件(dblclick)会返回一次单击事件(click)结果和一次双击事件(dblclick) 结果。而不是一次双击事件(dblclick)结果和两次单击事件结果(click)。

dblclick()当双击元素时，会发生 dblclick 事件。当鼠标指针停留在元素上方，然后按下并松开鼠标左键时，就会发生一次 click。在很短的时间内发生两次 click，即是一次 double click 事件。

<script type="text/javascript">
$(document).ready(function(){
  $("button").dblclick(function(){
    $("p").slideToggle();
  });
});
</script>
</head>
<body>
<p>这是一个段落。</p>
<button>请双击此处</button>
</body>

如此这般的话，只需消灭掉多余的一次单击事件(click)，这个问题就解决了。

var timer = null; 
$('button').live('click', function(event){ 
    timer && clearTimeout(timer); 
    timer = setTimeout(function(){ 
        console.log(event.type); 
    },300); 
}).live('dblclick', function(event){ 
    timer && clearTimeout(timer); 
    console.log(event.type); 
});

以上就是jquery事件dblclick与click冲突的解决方法分享的详细内容，更多请关注其它相关文章！

相关标签： dblclick jquery click

上一篇： jquery的插件怎么打印页面内容

下一篇： js传入参数是中文的时候出现 “******”未定义错误

推荐阅读