在jquery中click与dblclick都是一个点击事件,但是在dblclick事件是在click事件上重复点击了,这样如果我们同时的话就冲突了,下面我们来看分析。
在双击事件(dblclick),触发的两次单击事件(click)中,第一次的单击事件(click)会被屏蔽掉,但第二次不会。
1 2 3 4 5 6 7 8 9 10 11 12 | <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 事件。
1 2 3 4 5 6 7 8 9 10 11 12 | <script type= "text/javascript" >
$(document).ready( function (){
$( "button" ).dblclick( function (){
$( "p" ).slideToggle();
});
});
</script>
</head>
<body>
<p>这是一个段落。</p>
<button>请双击此处</button>
</body>
|
登录后复制
如此这般的话,只需消灭掉多余的一次单击事件(click),这个问题就解决了。
1 2 3 4 5 6 7 8 9 10 | 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冲突的解决方法分享的详细内容。更多信息请关注PHP中文网其他相关文章!