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

Question

鼠标点击和鼠标按下的区别 - 鼠标点击只发生一次，但鼠标按下每一次我的鼠标按下都会发生

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

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

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

我需要在我的鼠标按下时在每个滴答声中写入它 - 任何帮助:))

I don't use jquery , javascript only

Answer 1

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

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

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

Answer 2

mouseup and mousedown 不应该连续开火。它们旨在表示一个动作已经发生。

但是，您可以使用在 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>

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

Why OnMouseDown Event occur once , how to handle mouse hold event

javascript

event-handling

mouseevent