關於"touchstart與click同時觸發"問題

點擊事件可以分解成多個事件：

在移動端，手指點擊一個元素，會經過：touchstart --> touchmove -> touchend -->  click

---

 

由於移動設備能夠同時識別 touchstart 和 click 事件，因此當用戶點擊目標元素時，綁定在目標元素上的 touchstart 事件與 click 事件（約300ms后）會依次被觸發，也就是說，我們所綁定的回調函數會被執行兩次！

解決方案

方法一：使用事件對象中的 preventDefault 方法

preventDefault 方法的作用在於：阻止元素默認事件行為的發生，但有意思的是，當我們在目標元素同時綁定 touchstart 和 click 事件時，在 touchstart 事件回調函數中使用該方法，可以阻止后續 click 事件的發生。

 

const Button = document.getElementById("targetButton")
Button.addEventListener("touchstart", e => {
 e.preventDefault()
 console.log("touchstart event!")
})
 
Button.addEventListener("click", e => {
 e.preventDefault()
 console.log("click event!")
})

 

方法二：基於功能檢測綁定事件

通過判斷瀏覽器是否支持 touchstart 事件來封裝元素的點擊事件，這樣客戶端會根據當前環境判定元素應該綁定的事件類型。

const Button = document.getElementById("targetButton")
const clickEvent = (function() {
 if ('ontouchstart' in document.documentElement === true)
     return 'touchstart';
 else
     return 'click';
})();
 
Button.addEventListener(clickEvent, e => {
 console.log("things happened!")
})；

VUE解決方案：

HTML：

<div class="comment-text" 
     @touchstart.prevent="gtouchstart(XXX)"
     @touchend.prevent="triggerReply(XXXX)">
     {{ item.content}}
 </div>

JS：

data: function () {
    return {
          Loop: 0
      };
 }，
methods: {
    gtouchstart: function (XXXX) {
        let self = this;
        //執行長按的內容
        self.Loop = setTimeout(function () {
            self.Loop = 0;
            //XXXXXXXXXXXXXXX
        }, 500);
        return false;
    },
    triggerReply: function (XXXX) {
        let self = this;
        clearTimeout(self.Loop);
        //這里click內容
        if (self.Loop !== 0) {
             //XXXXXXXXXXXXXXX
        }
        return false;
    }
}

添加 touchstart.prevent，組織click事件。