e.preventDefault（）不是防彈？

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那不是我的發明，但不幸的是我忘記了消息來源因為時間過去了。