Javascript 区分mouseup mousedown和click

我知道，

mousedown

发生在用户按下鼠标按钮时，

mouseup

发生在释放鼠标和

click

当然是两个事件

mousedown

和

mouseup。

我有三个不同的事件，每个事件处理这三个事件mouseup down和click。我的问题是如何区分这三个，现在我的鼠标下有一个计时器，所以我想在计时器中添加一个布尔值，并在点击中测试它。我尝试了这个，但它不符合我的标准

Mousedown

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

Mouseup

-清除计时器

单击

-打开一个模块

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

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

---

这只是一个简单的例子。我可能错过了一些编码，但我希望你能在上面的代码中理解我的意思。有人知道区分这三个事件的好方法吗？

我已经用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太容易了，功能强大了，不能忽略。

我已经用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太简单、太强大了，无法忽略。

试试以下方法：

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

试试这个：

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

---

哈哈，我没有使用jQuery，因此我没有将jQuery作为标记编写；）我以前也经常使用jQuery，不过在看过很多jQuery库之后，我可能不会经常使用它。在这里和那里都没关系，而且知道香草是如何为我在20毫秒内编写的代码工作的也是一件很棒的事情，而jQuery将是1000毫秒，只是一个fleux数字，但仍然是。我知道你做了什么，所以我会把它改成香草，如果我做得很好，我会加上我是如何创建它的。是的，取消jQuery它会很容易。只需更改“$（'.class'）.mousedown”（“返回到”ee[i].addEventListener（'mousedown'），”并对mouseup部分执行相同的基本操作。我编写了一个没有jQueryless的部分，但遇到了与类有关的问题（也许如果我更了解您的目标的话）jQuery对程序员来说非常简单，尽管它的运行速度可能不够快（无法确认或否认）只要你不使用会吞噬用户系统的大量复杂代码，结果是非常值得的。不，是的，你是对的，代码非常长，我决定使用JavaScript（香草）而不是jQuery与jQuery相比，这是我的轻量级选项，它不会吞噬用户系统，但使用jQuery，您将不得不做许多不必要的事情来完成代码的功能。尤其是使用jQuery。每一个我都鄙视lol。我会将您的答案标记为正确的，因为您是唯一一个，而且它离我的目标足够近了（除了jQuery；）谢谢！我是新手，所以从现在起我一定要考虑海报标签。我坚持使用“香草”很久了，但一旦我开始注意到我可以用jQuery进行的轻量级编码，我就没有回头看……也许我会研究和比较双方的延迟和电子浪费，以权衡未来的风险。谢谢再次祝你好运，祝你编码顺利！这里也一样，是的，当我还是新人的时候，我在这里也遇到了困难，所以我不会投你一票或任何东西。祝你编码也很好，伙计。哈哈，我不使用jQuery，所以我为什么不把jQuery写为标签；）我以前也经常使用jQuery，虽然在回顾了很多jQuery库之后，我可能不会经常使用它。在这里和那里都没关系，而且知道香草是如何为我在20毫秒内编写的代码工作的也是一件很棒的事情，而jQuery将是1000毫秒，只是一个fleux数字，但仍然是。我知道你做了什么，所以我会把它改成香草，如果我做得很好，我会加上我是如何创建它的。是的，取消jQuery它会很容易。只需更改“$（'.class'）.mousedown”（“返回到”ee[i].addEventListener（'mousedown'），”并对mouseup部分执行相同的基本操作。我编写了一个没有jQueryless的部分，但遇到了与类有关的问题（也许如果我更了解您的目标的话）jQuery对编码人员来说非常容易，尽管它的运行速度可能不如l