區分 mouseup mousedown 和 click

Question

我知道， mousedown當用戶按下鼠標鍵發生， mouseup發生時釋放的鼠標click ，當然是兩個事件mousedown和mouseup. 我有三個不同的事件，每個事件都處理這三個事件 mouseup down 和 click。 我的問題是如何區分這三個，現在我的鼠標按下有一個計時器，所以我想在該計時器中添加一個布爾值並在單擊時測試它我試過這個，但它不符合我的標准。

Mousedown - 計時器檢查某些類，然后如果目標元素中不存在這些類，則繼續

Mouseup - 清除計時器

Click - 打開一個模塊

我可能沒有使布爾值成為每個人都可以讀取或不讀取的全局變量，或者我完全遺漏了一些東西。 這是我的完整代碼的示例快速代碼：

   var isDown = false;
 ee[i].addEventListener('click',function(){
   if(isDown===false){
     openModule();
    }
  },false);

 ee[i].addEventListener('mousedown',function(){
     var timer;
     var $this = this;
     timer = setTimeout(function(){
    if($this.className == "class"){
     isDown=true;
     createActive();
     }
   },500);
 },true);

  ee[i].addEventListener('mouseup',function(){
    clearTimeout(timer);
  },false);

這只是一個簡單的例子。 我可能錯過了一些編碼，但我希望你能在上面的代碼中看到我的意思。 有人知道區分這三個事件的好方法嗎？

Answer 1

我已經使用 jQuery 重寫了您的代碼...

var isDown = false;
var timer;

$('.class').mousedown(function(){
    isDown = false;
    timer = setTimeout(function(){
        isDown = true;
        //createActive();
            console.log('MOUSE DOWN');
    }, 500);
}).mouseup(function(){
    if(isDown === false){
        //openModule();
            console.log('CLICK');
    }else{
            console.log('MOUSE UP');
    }
    clearTimeout(timer);    
});

如果您只是將 jQuery 添加到您的頁面，我的代碼將自動將其自身附加到您的文檔中具有“class”類的任何元素。

我已經注釋掉了你的 createActive(); 和 openModule(); 調用，以便您可以使用它（在運行時查看您的 javascript 控制台將向您顯示正在運行的腳本 - 完成播放后刪除 console.log() 內容）。 這段代碼可以進一步優化，但它會給你一個大致的想法。

您的計時器變量需要全局創建（我將其移出函數）。

在這種情況下（聲明 mousedown 時間障礙），click 函數將變得無用，所以我將它臨時添加到 mouseup 函數中。

了解核心 javascript 是件好事，但 jQuery 太容易和強大了，不容忽視。

Answer 2

嘗試這個：

const isDown = ref(false)
const timer = ref(0)

const mouseDown = () => {
  isDown.value = true
  timer.value = setTimeout(() => {
    isDown.value = false
  }, 120)
}

const mouseUp = () => {
  if (isDown.value === true) {
    hideModal()
  } else {
    return
  }
  clearTimeout(timer.value)
}