javascript - Why OnMouseDown Event occur once , how to handle mouse hold event - Stack Overflow

admin管理员组

文章数量:1415421

the difference between mouse click and mouse down - that mouse click occurs only once , but mouse down occurs every tick my mouse is down

here's in my simple example - I don't know why the event occur only once , however I am using mouse down not mouse click

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

It writes 'HH' only once !! mouse up and down again - to write it again

I need it to be written every tick as my mouse is down - any help :))

I don't use jquery , javascript only

the difference between mouse click and mouse down - that mouse click occurs only once , but mouse down occurs every tick my mouse is down

here's in my simple example - I don't know why the event occur only once , however I am using mouse down not mouse click

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

It writes 'HH' only once !! mouse up and down again - to write it again

I need it to be written every tick as my mouse is down - any help :))

I don't use jquery , javascript only

• javascript
• event-handling
• mouseevent

Share Improve this question Follow asked Dec 23, 2016 at 16:21 Ahmed MohsenAhmed Mohsen 43311 gold badge66 silver badges1919 bronze badges 2

• Please define what you are calling a "tick". – Scott Marcus Commented Dec 23, 2016 at 16:26
• 1 mousedown only fires when the user presses a button. It doesn't fire continuously. – Mike Cluck Commented Dec 23, 2016 at 16:29

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 5

mouseup and mousedown are not supposed to continuously fire. They are meant to signal a single action has happened.

However, you could achieve this effect with a custom timer (setInterval() to be more specific) that is triggered on mousedown and cancelled on 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>

Use "onmousemove" instead "onmouseover" and I remend you use a function like this in your javascript code:

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

Working pen: http://codepen.io/parzibyte/full/ENzjvW/

本文标签： javascriptWhy OnMouseDown Event occur oncehow to handle mouse hold eventStack Overflow