Warum OnMouseDown Ereignis einmal auftreten, wie Maus halten Ereignis

Question

der Unterschied zwischen Mausklick und die Maus nach unten zu handhaben - das Mausklick nur einmal vorkommt, aber Maus tritt nach unten jeder meine Maus tick ist unten

hier in meinem einfachen Beispiel - ich weiß nicht, warum das Ereignis nur einmal vorkommen, aber ich bin mit der Maus nach unten nicht Maus

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

nur einmal klicken Sie schreiben ‚HH‘ !! up Maus und wieder nach unten - zu schreiben, es wieder

Ich brauche es jeden Tick geschrieben werden wie meine Maus nach unten ist - jede Hilfe :))

Ich benutze keine jQuery, JavaScript nur

Answer 1

mouseup and mousedown sollen nicht ständig feuern. Sie sollen signalisieren, dass eine einzige Aktion passiert ist.

Sie können jedoch diesen Effekt mit einem benutzerdefinierten Timer erreichen (setInterval() genauer zu sein), dass auf mousedown und entwertet auf mouseup ausgelöst wird:

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!"); 
 
});

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

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

Answer 2

Use "onmousemove" statt "onmouseover" und ich empfehle Ihnen eine Funktion wie diese in Ihrem JavaScript-Code verwenden:

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

Arbeits Stift: http://codepen.io/parzibyte/full/ENzjvW/