ホームページ >ウェブフロントエンド >jsチュートリアル >jQuery: マウスダウンとクリックの競合イベント

jQuery: マウスダウンとクリックの競合イベント

黄舟
黄舟オリジナル
2017-06-28 09:23:212988ブラウズ

マウスイベントは、通常、マウスボタンを区別するためにボタンを使用します(DOM3標準では、クリックイベントは左ボタンのみを監視し、マウスダウンとマウスアップを通じてのみマウスボタンを判断できます):

1 左マウスボタンボタン = 0。

2. マウスの右ボタン ボタン = 2

3. マウスのホイール ボタン = 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');
    }
}

マウスダウンとクリックの間の競合を解決します (クリック イベントが短いかどうかを判断するためにイベント時間を使用します)

<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(&#39;click&#39;);
        key = false;
    }
}
p.onmousedown = function() {
    firstTime = new Date().getTime();
    console.log(&#39;mouseDown&#39;);
}
p.<a href="http://www.php.cn/wiki/1459.html" target="_blank">onmouseup</a> = function() {
    console.log(&#39;mouseUp&#39;);<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>

以上がjQuery: マウスダウンとクリックの競合イベントの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。