Question

鼠标单击和鼠标按下之间的区别 - 鼠标单击仅发生一次，但鼠标单击时每次发生鼠标单击

这是我的简单示例 - 我不知道为什么事件只发生一次，但是我使用鼠标按下而不是鼠标点击

<canvas id="drawhere" onmousedown="console.log('HH')" width="600" height="500"></canvas>

只写一次'HH'!!鼠标上下再次 - 再次写入

我需要在每次打勾时写下我的鼠标 - 任何帮助：））

我不使用jquery，仅限javascript

Answer 1

mouseup and mousedown 不会连续开火。它们意味着发出单一行动的信号。

但是，您可以使用mousedown触发并在mouseup上取消的自定义计时器（ setInterval() 更具体）来实现此效果：

＆＃13;

document.getElementById("main");

// Variable to hold a reference to the timer
var timer = null;

// Set up an event handler for mousedown
main.addEventListener("mousedown", function(evt){
  // Start a timer that fires a function at 50 millisecond intervals
  timer = setInterval(function(){
    // the function can do whatever you need it to
    console.log("Mous is down!");
  }, 50);
});


// Set up a custom mouseup event handler
main.addEventListener("mouseup", function(evt){
  // Cancel the previously initiated timer function
  clearInterval(timer);
  
  // And, do whatever else you need to:
  console.log("Mouse is Up!");
});

// Set up a custom mouseleave event handler so that
// if the mouse is dragged out of the original element
// and then the mouse is released, the timer will stop
main.addEventListener("mouseleave", function(evt){
  // Cancel the previously initiated timer function
  clearInterval(timer);
  
  // And, do whatever else you need to:
  console.log("Mouse is no longer on element!");
});

＆＃13;

#main {
  background-color:yellow;
  width: 300px;
  height: 100px;
}

＆＃13;

<div id="main">Press and hold the mouse down inside me!</div>

＆＃13;

Answer 2

使用“onmousemove”代替“onmouseover”，我建议你在javascript代码中使用这样的函数：

document.getElementById("drawhere").addEventListener("mousemove", function(){
    console.log("mouse event!");
});

工作笔： http://codepen.io/parzibyte/full/ENzjvW/

为什么OnMouseDown事件发生一次，如何处理鼠标hold事件

2 个答案: