Question

我知道当用户按下鼠标按钮时会发生mousedown，当释放鼠标并单击时发生鼠标操作当然是两个事件mousedown和mouseup。我有三个不同的事件，每个事件处理这三个事件mouseup down和click。我的问题是如何区分这三个，现在我的鼠标有一个计时器，所以我想在该计时器中添加一个布尔值并在我试过的点击中测试它并且它不符合我的标准。

Mousedown-timer检查某些类，如果目标元素中没有这些类，则继续

鼠标 - 清除计时器

点击 - 打开一个模块

我可能没有让boolean成为一个全局变量，每个变量都可以读取，或者我完全错过了一些东西。这是我的完整代码的示例快速代码

   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)
}

区分mouseup mousedown和click

2 个答案: