js實現鼠標單擊或者雙擊事件

 

 

// timer為全局變量
getClickEmail1(_type) {
      clearTimeout(this.timer);
      if (_type == 1) {
        if (event.detail == 2) return;
        this.timer = setTimeout(function() {
          console.log("單擊");
        }, 300);
      } else {
        console.log("雙擊");
      }
}

 

html如下：

<span
        @click="getClickEmail1(1)"
        @dblclick="getClickEmail1(2)"
>點我</span>

 

單擊：用戶單擊觸發 getClickEmail1(1) 函數，清除定時器這個先不管，if里的意思是如果在同樣的地方執行同種方法兩次，也就是雙擊的意思，退出這個函數，單擊不會觸發if。下來給定時器賦值，300ms后執行輸出單擊的這句話，如果單擊的話就不會在300ms里觸發其他事件，所以單擊解釋完畢。 

雙擊：用戶雙擊觸發兩次click和一次dbclick。第一次先執行aa函數，因為這是第一次所以不會return，300ms之間還沒有等單擊這兩個字輸出便再次觸發了aa函數，次數記為兩次，return出去，之后觸發bb函數，輸出雙擊兩個字。