Question

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

$("#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!
                } );

我希望click事件永远不会永远不会被触发（因为浏览器应该通过事件处理层次结构）但实际上当我触摸元素时，让我们说20次，而不是一次点击事件也会触发。为什么呢？

我也尝试过这样的事情：

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

它似乎更坚固但不防弹。所以我不得不这样做：

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

这似乎有效，但非常愚蠢，不是吗？有想法的人是什么意思？谢谢！

编辑：所以我真的不得不这样做：

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和click事件，确保不会触发click事件（两次）以处理触摸敏感浏览器和常规浏览器（甚至是新的组合浏览器）。你会怎么做？

Answer 1

我希望click事件永远不会永远不会被触发（因为浏览器应该通过事件处理层次结构）[...]

您对even.preventDefault()抱有错误的期望。

event.preventDefault()会阻止浏览器为该元素/事件组合执行的默认操作。例如。提交表格或以下链接。不阻止执行任何其他事件处理程序。

e.stopPropagation()可防止事件冒泡，以便不会执行添加到祖先的事件处理程序。

但是，您不能使用任何这些方法来阻止执行不同事件的处理程序，因此设置标志似乎确实是执行此操作的正确方法。

Answer 2

现在我在我的网站上的大多数地方使用以下代码，这些代码非常好且可靠：

var flag = false; 
$("#element").on( 'touchstart click', function() {
    if ( !flag ) {
        flag = true;
        setTimeout( function() {
            flag = false;
        }, 100 ); // someone else recommended 300 here but I use this value

        // action here

    };                
    return false;
} );

PS这不是我的发明，但不幸的是我忘记了消息来源因为时间过去了。

e.preventDefault（）不是防弹？

2 个答案: