e.preventDefault（）不防弹？ [英] e.preventDefault() not bulletproof?

问题描述

我问了一个类似的问题，但没有得到一个真正令人满意的答案，所以我会在这里再试一次。当我使用这样的代码：

I have asked a similar question but didn’t get a real satisfying answer, so I will try again here. When I use code like this:

$("#element")   .on( 'click', function() {
                    // do something
                } )             
                .on( 'touchstart', function(e) {
                    e.preventDefault();
                    // do the same thing but on touch device like iPad f.e.
                    // and more over PLEASE do not fire the click event also!
                } );

我期望点击事件永远不会永远不会触发（因为浏览器应该通过事件工作），但实际上当我触摸元素，我们说20次，比一次点击事件也触发。为什么？

I am expecting that the click event is never never never fired (because of the hierarchy with which browser should work through the events) but in fact when I touch the element let’s say 20 times, than one time the click event fires also. Why?

我也尝试过类似的操作：

And I also tried things like:

$("#element")   .on( 'click', function() {
                    // do something
                } )             
                .on( 'touchstart', function(e) {
                    e.preventDefault();
                    e.stopPropagation();
                    // do the same thing but on touch device like iPad f.e.
                    // and more over PLEASE do not fire the click event also!
                    return false;
                } );

这似乎是一个更坚实，但不是防弹。
所以我不得不这样做：

It seemed to be a little more solid but not bulletproof. So I had to do:

 $("#element")  .on( 'click', function() {
                    if ( !touchdevice ) {
                        // do something
                    };
                } )             
                .on( 'touchstart', function(e) {
                    e.preventDefault();
                    e.stopPropagation();
                    // do the same thing but on touch device like iPad f.e.
                    // and more over PLEASE do not fire the click event also!
                    return false;
                } );

这似乎工作，但很可笑傻，不是吗？任何人有想法这是什么？谢谢！

which seems to work but is awfully silly, isn’t it? Anyone with ideas what is this about? Thanks!

编辑：
所以我真的不得不做一些事情：

So I really had to do something like:

var touched;
$("#element")   .on( 'click', function() {
                    if ( !touched ) {
                        // do something
                    };
                } )             
                .on( 'touchstart', function(e) {
                    e.preventDefault();  // actual senseless here
                    e.stopPropagation(); // actual senseless here
                    touched = true;
                    // do the same thing but on touch device like iPad f.e.
                    // and more over PLEASE do not fire the click event also!
                    return false;        // actual senseless here
                } );

来吧！必须有一个安全的通用方式使用touchstart和点击事件在同一个元素，确保点击事件不触发（两次）来处理触摸敏感和常规浏览器（甚至新的组合）。

Come on guys! There must be a safe common way to use touchstart and click events on the same element ensuring that the click event is not fired (twice) to handle both touch sensible and regular browsers (or even the new combined ones). How would you do it?

推荐答案

我期望点击事件永远不会从未被触发过（因为浏览器应该通过事件的层次结构）[...]

I am expecting that the click event is never never never fired (because of the hierarchy with which browser should work through the events) [...]

$ c> even.preventDefault（）。

You have wrong expectations of even.preventDefault().

浏览器对该元素/事件组合执行的默认操作。例如。提交表单或关注链接。

event.preventDefault() prevents the default action that the browser performs for that element/event combination. E.g. submitting a form or following link. It does not prevent any other event handler from being executed.

e.stopPropagation（） c>防止事件冒泡，从而不执行添加到祖先的事件处理程序。

e.stopPropagation() prevents the event from bubbling up so that event handlers added to ancestors are not executed.

但是，任何这些方法来阻止不同事件的处理程序被执行，所以设置一个标志似乎确实是正确的方法这样做。

However, you cannot use any of these methods to prevent the handler of a different event to be executed, so setting a flag seems indeed to be the right way to do this.

这篇关于e.preventDefault（）不防弹？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！