为什么发生一次性事件一次，如何处理鼠标持有事件

Question

鼠标点击和鼠标向下之间的差异 - 鼠标点击仅发生一次，但是鼠标向下发生，每一个tick tick我的鼠标都向下

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

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

它只写" HH"一次！鼠标一次上下 - 再次写入

我需要在我的鼠标掉下来的情况下将其写入每个滴答 - 任何帮助：）

我不使用jQuery，仅JavaScript

Answer 1

mouseup和 mousedown 不应该连续开火。它们的目的是发出一项动作。

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

。

document.getElementById("main");
var timer = null;  // Variable to hold a reference to the timer
// 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("Mouse is down!");
  }, 50);
});
// Set up a custom mouseup event handler for letting go 
// of the mouse inside the box or when mouse leaves the box.
function mouseDone(evt){
  clearInterval(timer);         // Cancel the previously initiated timer function
  console.log("Mouse is up or outside of box!");  // And, do whatever else you need to
}
// Bind the handlers:
main.addEventListener("mouseup", mouseDone);
main.addEventListener("mouseleave", mouseDone);

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

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

Answer 2

使用" onmousemove"而不是" onMouseover"，我建议您在JavaScript代码中使用这样的函数：

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

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