区分mouseup mousedown和click [英] Differentiating between mouseup mousedown and click

问题描述

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

I know that mousedown happens when a user depresses the mouse button, mouseup happens when the release the mouse and click is of course two events mousedown and mouseup. I have three different events each dealing with these three events mouseup down and click. My question is how to differentiate between the three, now my mouse down has a timer, so I was thinking of adding a boolean in that timer and testing it within the click I tried this and it didn't work to my standards.

Mousedown-计时器检查某些类，然后如果目标元素中没有这些类继续

Mousedown- timer checks for certain classes then if none of these classes exist within the targeted element proceed

Mouseup - 清除计时器

Mouseup- clear the timer

点击 - 打开一个模块

Click- open a module

我可能没有将布尔值设为全局变量每个人都可以阅读或不阅读，或者我完全错过了一些东西。这是我的完整代码的示例快速代码

I may have not made the boolean a global variable that each can read or not, or I am missing something completely. here is an example quick code of my full code

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

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

That is just a quick example. I may have missed some coding but I hope you catch my drift in the code above. Anyone know of a good way to differentiate between the three events?

推荐答案

我用jQuery重写了你的代码...

I've rewritten your code utilizing 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'。

If you simply add jQuery to your page, my code will automatically attach itself to any element in your document with a class of 'class'.

我已经注释掉了你的createActive（）;和openModule（）;调用以便您可以使用它（在运行时查看您的JavaScript控制台将显示操作中的脚本 - 当您完成播放时删除console.log（）内容）。这段代码可以稍微优化一下，但它会给你一般的想法。

I've commented out your createActive(); and openModule(); calls so that you can play around with it (viewing your javascript console at runtime will show you the script in action - remove the console.log() stuff when you're done playing). This code could be optimised a bit more but it will give you the general idea.

你的计时器变量需要全局创建（我把它移出了函数）。

Your timer variable needed to be created globally (I moved it out of the function).

在这种情况下（声明一个mousedown时间障碍），click函数将变得无用，所以我将它即兴创作到mouseup函数中。

In this case (declaring a mousedown time barrier) the click function will be rendered useless so I've improvised it into the mouseup function.

知道核心javascript很好，但jQuery太容易和强大而无法忽略。

It's good to know core javascript, but jQuery is just too easy and powerful to ignore.

这篇关于区分mouseup mousedown和click的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！