Home > Article > Web Front-end > jQuery: mousedown and click conflict events
MouseEvent, generally use button to distinguish mouse buttons (DOM3 standard stipulates: click event can only monitor the left button, and the mouse button can only be judged through mousedown and mouseup):
1. Left mouse button = 0
2. Right mouse button = 2
3. Mouse wheel button = 1
p.onmousedown = function (e) { var event = e || window.event; if(event.button == 2){ console.log('right'); }else if(event.button == 0){ console.log('left'); } }
Solves the gap between mousedown and click Conflict (Use the time of event occurrence to determine whether the click event time is short)
<span style="color: #000000">var key = false;//设置了一个标志 false为点击事件 ture为鼠标移动事件 var firstTime = 0; var lastTime = 0; p.<a href="http://www.php.cn/wiki/1449.html" target="_blank">onclick</a> = function() { if(key){ console.log('click'); key = false; } } p.onmousedown = function() { firstTime = new Date().getTime(); console.log('mouseDown'); } p.<a href="http://www.php.cn/wiki/1459.html" target="_blank">onmouseup</a> = function() { console.log('mouseUp');<br/>//鼠标抬起后 记录时间 超过200ms就是移动事件 lastTime = new Date().getTime(); if( (lastTime - firstTime) </span><span style="color: #0000ff"><</span><span style="color: #800000"> 200</span><span style="color: #ff0000">){ key </span><span style="color: #0000ff">= true; </span><span style="color: #ff0000">} }</span>
The above is the detailed content of jQuery: mousedown and click conflict events. For more information, please follow other related articles on the PHP Chinese website!