1

我知道mousedown当用户按下鼠标按钮时mouseup会发生这种情况，当释放鼠标时会发生这种情况click，当然是两个事件mousedown，mouseup.我有三个不同的事件，每个事件都处理这三个事件 mouseup down 和 click。我的问题是如何区分这三者，现在我的鼠标按下有一个计时器，所以我正在考虑在该计时器中添加一个布尔值并在单击时对其进行测试，我尝试了这个，但它不符合我的标准。

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

Mouseup- 清除计时器

Click- 打开一个模块

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

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

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

4

2 回答 2

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 时间障碍），单击功能将变得无用，因此我将其即兴发挥到 mouseup 功能中。

了解核心 javascript 很好，但 jQuery 太简单和强大，不容忽视。

于 2013-10-26T03:24:49.663 回答
0

尝试这个：

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)
}
于 2021-05-26T13:19:26.257 回答