javascript - 区分 mouseup mousedown 和 click

Question

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

Mousedown - 计时器检查某些类，如果目标元素中不存在这些类，则继续

Mouseup- 清除计时器

点击——打开一个模块

我可能没有使 bool 值成为每个人都可以读取或不可读的全局变量，或者我完全遗漏了一些东西。这是我的完整代码的示例快速代码:

   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 添加到您的页面，我的代码将自动将其自身附加到您文档中具有“类”类的任何元素。

我已经注释掉了你的 createActive();和 openModule()；调用以便您可以使用它(在运行时查看您的 javascript 控制台将向您显示正在运行的脚本 - 完成播放后删除 console.log() 内容)。这段代码可以进一步优化，但它会给你一个总体思路。

您的计时器变量需要全局创建(我将其移出函数)。

在这种情况下(声明一个 mousedown 时间障碍)click 函数将变得无用，所以我将其临时添加到 mouseup 函数中。

了解核心 javascript 是件好事，但 jQuery 太简单太强大而无法忽视。