首页 > web前端 > js教程 > jquery事件dblclick与click冲突的解决方法分享

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

黄舟
发布: 2017-06-27 10:42:00
原创
2233 人浏览过

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;

$(&#39;button&#39;).live(&#39;click&#39;, function(event){

    timer && clearTimeout(timer);

    timer = setTimeout(function(){

        console.log(event.type);

    },300);

}).live(&#39;dblclick&#39;, function(event){

    timer && clearTimeout(timer);

    console.log(event.type);

});

登录后复制

以上是jquery事件dblclick与click冲突的解决方法分享的详细内容。更多信息请关注PHP中文网其他相关文章!

相关标签:
本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板