なぜOnMouseDownイベントのマウスホールドイベント

Question

にマウスのクリックやマウスダウンの違いをどのように処理するか、一度発生 - そのマウスクリックは一度だけ発生しますが、マウスがダウンして、すべてが私のマウスをダニ発生し、ここでダウン

ですが、私の単純な例ではあります - 私はマウスクリックではなくマウスを使用している理由は分かりません。

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

「HH」は一度だけ書き込みます！マウスを上下に再び - 私は私のマウスがダウンしているとして、それはすべてのダニを書き込む必要が再び

それを書くために - 私はjqueryのを使用していない任意のヘルプ:)）

、ジャバスクリプトのみ

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

ワーキングペン：代わりに "onmouseover属性" "れるonmousemove"

Answer 1

mouseup and mousedownは、連続的に発火するとは考えられません。彼らは一回の行動が起こったことを伝えるためのものです。

ただし、カスタムタイマー（setInterval()より具体的には）mousedownでトリガとmouseupにキャンセルされると、この効果を実現できます。

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

使用して、私はあなたのjavascriptのコード内でこのような機能を使用することをお勧め http://codepen.io/parzibyte/full/ENzjvW/