web-dev-qa-db-ja.com

jQueryで中央ボタンのクリック（スクロールボタン）を検出する

Onclickでいくつかのmp3ファイルを再生するためのタグ付きのリストがあります。 jQueryで「クリック」イベントにバインドすると正常に動作します。

_$oo.data({'__mp3play':true,'wapiHandle':h+0,'wapiIndex':o.ajaxPlayList[h].length})
           .bind( 'click', function()
            { var wh = $j(this).data('wapiHandle');
              if( typeof o.regObjects[wh] == 'object' && o.regObjects[wh].play(this.href))
               { return false; }
            });
_

マウスの左ボタンをクリックしたとき：フラッシュプラグインが読み込まれると、デフォルトの処理が無効になります。それ以外の場合は、通常どおり開かれます。

しかし、マウスのスクロールボタンを使用してクリックすると、クリックイベントが発生せず、リンクが正常に開きます。

マウスダウンイベントまたはマウスアップイベントを使用しようとしましたが、助けにはなりません。リンクは常に開き、Flash Playerでも音楽が再生されるという副作用があります。

また、preventDefault()はまったく機能しません。

誰かがマウスの中央ボタンのクリック（スクロールボタンのクリック）を検出する方法を教えてもらえますか？

コメントしてくださってありがとうございます。

PS：私はこのサイトで利用できる「中央ボタン」に関する他の解決策をすでに試しました。

すべての種類のブラウザでテストされ、同じ結果が得られました。

編集：これも機能しません。マウスの中ボタンを使用すると、リンクが通常どおり開かれます。マウスの左ボタンを使用すると、何も起こりません。

_$oo.bind( 'mousedown click mouseup', function(e)
{ e.preventDefault(); e.stopPropagation(); return false; });
_
jquerybuttonclickscroll
21
Codebeat

よしみんな

ご意見ありがとうございます。 '@ no.good.at.coding'には良い解決策がありますが、IE（この記事の後半を参照）では機能しません）が良い出発点です。彼のコードを次のように変更します。

// Avoid relations will be opened in extra tab when clicking middle-scroll-button to open it
$(document).bind($.browser.msie ? "mousedown" : "click", function(e)
{
    if (e.which == 2 && e.target.tagName == 'A') 
    {
        var bIE = $.browser.msie,
            $o = $(e.target),
            oe = $o.data('events'),
            b = true,
            f = function(){};

        if (typeof oe == 'object' && oe['click']) {
            f = function(){ $o.trigger('click'); }
        } else {
            b = (typeof $o[0].href == 'string' && ($o[0].target == undefined || $o[0].target == '' || $o[0].target == '_self'));
            if (b) { 
                f = function () { window.location.href=$o[0].href; };
            }
        }

        if (!b) { return; }

        e.stopImmediatePropagation();
        e.stopPropagation();
        e.preventDefault();

        if (bIE)
        {
            if (!window.__swcp__) { 
                window.__swcp__= $('<div style="position:fixed;top:0px;left:0px;width:100%;height:100%;background:#000;display:block;z-index:9999;opacity:0.01;filter:alpha(opacity:1);" />').appendTo('body'); 
            }
            window.__swcp__.show();
        }

        setTimeout(f, 50);
        if (bIE) { 
            setTimeout( function() { window.__swcp__.hide(); }, 1000 );
        }

        return false;
    }
});

中央ボタンは、マウスの左ボタンのように機能します。ご覧のとおり、IEはさらに必要です。リンクタグが1秒間フォーカス解除され、追加のタブで開かれるのを回避する必要があります。ここでは、これを行う簡単な方法を使用して、 「目」の透明なdiv（不透明度= 0.01）。ウィンドウのコンテンツの上に配置されるため、ページ上のすべてのリンクがフォーカスされません。ユーザーは、マウスポインターがポインターからデフォルトに変更できることを除いて、違いに気付きません。 1秒後、ポインターに戻ります（IEのみ）。

私はこれを回答として受け入れますが、より良いアイデアがある場合はお知らせください。

3
Codebeat

さて、簡単なテストの後、3つは次のように並べられているようです。

  • 左-1
  • 中-2
  • 右-3

だからあなたが持っていた場合：

$(document).mousedown(function(e){
    switch(e.which)
    {
        case 1:
            //left Click
        break;
        case 2:
            //middle Click
        break;
        case 3:
            //right Click
        break;
    }
    return true;// to allow the browser to know that we handled it.
});
51
RobertPitt

mousedownイベント中にクリックアクションを発動しないでください。イベントパイプラインの残りの部分を無視し、現在のユーザーの期待と設計慣行に反します。

問題

次に、クリックの種類ごとに発生するイベントの通常の順序を示します。

$(document).on("mousedown mouseup click focus blur",function(e) {
  console.log("{" + e.which + ":" + e.type + "}"); 
});

Click Events

通常、最後の click イベントを処理します。これは、現在のアクションを続行するというユーザーの最終的な意図を示すためです。

clickイベントは、ポインティングデバイスボタン（通常はマウスのプライマリボタン）がを押して離したときに発生します単一要素.

残念ながら、マウスの中ボタンを押しても、そのようなイベントは発生しません（おそらく、そうすると、開発者がクリックイベントをリッスンして、複数の可能な呼び出しを区別するようになるためです）。しかし、ミドルクリックに対するアクションを関連付けたい場合は、同じUXの期待に従う必要があります。

解決

mousedownイベントをリッスンし、すぐにmouseupイベントの使い捨てハンドラーをアタッチします。中央のキーが押され、要素が一致した場合、 trigger 独自の custom event タイプmiddleclickを使用します 元のイベントのシード 。

$(document).on("mousedown", function (e1) {
  $(document).one("mouseup", function (e2) {
    if (e1.which == 2 && e1.target == e2.target) {
      var e3 = $.event.fix(e2);
      e3.type = "middleclick";
      $(e2.target).trigger(e3)
    }
  });
});

これは、if中央ボタンがクリックされた場合の判別方法を区別するのに役立ち、その場合の処理​​方法を指定できるため、次のようなカスタムイベントタイプのリスナーを設定できます。 ：

$(document).on("middleclick", function (e) {
    console.log("{" + e.target.nodeName.toLowerCase() + ":" + e.type + "}"); 
});

jsFiddle とStack Snippetsのデモ：

$(document).on("mousedown", function (e1) {
  $(document).one("mouseup", function (e2) {
    if (e1.which == 2 && e1.target == e2.target) {
        var e3 = $.event.fix(e2);
      e3.type = "middleclick";
      $(e2.target).trigger(e3)
    }
  });
});

$(document).on("middleclick", function (e) {
  console.log("{" + e.target.nodeName.toLowerCase() + ":" + e.type + "}"); 
});

$(document).on("mousedown mouseup click focus blur",function(e) {
  console.log("{" + e.which + ":" + e.type + "}"); 
}); 
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.js"></script>

<div  style="background:#31965a;color:white;width:100px;height:100px;line-height:100px;text-align:center;">
  Click Me!
</div>

* Chrome、FF、Edge、IE11でテスト済み

10
KyleMit

わかった。これが 動作するように見えるフィドル です。トリック（少なくともFF4では）は、クリックハンドラーをdocumentにバインドし、伝搬を停止させることです。

$(document).click(function(e){
        //not checking for the right click will prevent the context-menu from showing, you may or may not want to do that
        if (e.which != 3) { 
            e.preventDefault();
            return false;
        }
    });

このソリューションはこのフォーラムページで見つかりました 。

8
no.good.at.coding

e。whichはそれを行うべきです：

簡単な例：

$(document).ready(function(){
    $(document).mousedown(function(e){
         alert(e.which); // ##=> left
    }) 
})
0
Yule