鼠标松开鼠标按下和点击之间的区别(Differentiating between mouseup m

2019-10-18 20:21发布

我知道,当用户按下鼠标键鼠标按下情况,鼠标松开时会发生松开鼠标点击当然是两个事件的mousedown和鼠标松开的。 我有三个不同的事件每次处理这三个事件的MouseUp下来,然后单击。 我的问题是如何在三者之间区分,现在我的鼠标点下有一个计时器,所以我想在定时器中加入一个布尔值,我尝试这个点击中测试它,它不工作,我的标准。

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

这只是一个简单的例子。 我可能已经错过了一些编码,但我希望你明白我的意思上面的代码。 任何人都知道的一个好办法三个事件之间进行区分?

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()的东西,当你完成播放)。 该代码可以优化多一点,但它会给你的总体思路。

需要在全球范围内创建了定时器变量(我把它的功能)。

在这种情况下(声明鼠标按下时屏障)点击功能将形同虚设所以我即兴成鼠标松开功能。

这是很好的了解核心JavaScript,但jQuery是太简单而强大的忽视。



文章来源: Differentiating between mouseup mousedown and click