9

ユーザーが入力フィールドを右クリックしたときにデフォルトのcontextMenuを無効にして、カスタムのcontextMenuを表示できるようにします。一般的に、次のような操作を行うと、右クリックメニューを無効にするのは非常に簡単です。

$([whatever]).bind("click", function(e) { e.preventDefault(); });

実際、FFの入力フィールドを除いて、ほぼすべての要素でこれを行うことができます-誰かが理由を知っているか、いくつかのドキュメントに私を向けることができますか？

これが私が使っている関連コードです、みんなありがとう。

HTML：

<script type="text/javascript">
 var r = new RightClickTool();
</script>

<div id="main">
  <input type="text" class="listen rightClick" value="0" />  
</div>

JS：

function RightClickTool(){

var _this = this;
var _items = ".rightClick";

$(document).ready(function() { _this.init(); });

this.init = function() {
 _this.setListeners(); 
}

this.setListeners = function() {
 $(_items).click(function(e) {
  var webKit = !$.browser.msie && e.button == 0;
  var ie = $.browser.msie && e.button == 1;

  if(webKit||ie)
  { 

   // Left mouse...do something()

  } else if(e.button == 2) {
   e.preventDefault(); 

   // Right mouse...do something else();
  }

 });
}

} // Ends Class

編集：

申し訳ありませんが、コメントを読んだ後、私はいくつかのことを明確にする必要があることに気付きました。

1）上記のコードは機能します...ある意味で。コードはどのボタンがクリックされたかを並べ替えることができます。e.preventDefault（）と言ってもかまいませんが、右クリックメニューがポップアップします。言い換えれば、e.buttonにアラートを設定すると、左が1または0、右が2になります...しかし、それは私を笑わせ、それでもひどいデフォルトメニューを表示します！

2）jQueryセレクターを（入力以外の）他の要素に配置すると、すべてが機能し、FFはpreventDefault（）呼び出しを尊重し、デフォルトの右クリックメニューは表示されません。

4

3 に答える 3

12

デフォルトのコンテキストメニューを無効にするクロスブラウザソリューション：

window.oncontextmenu = function() { return false };

特定の要素内でのみコンテキストメニューイベントをキャプチャするには、次を使用します。

document.getElementById('myElement').oncontextmenu=function(){

    // Code to handle event
    return false;
}

右クリックイベントを中断するためにoncontextmenu以外のメソッドを試してみると、正確なイベントシナリオとブラウザに応じて異なる結果が得られます。

jQueryの場合：

$('myElement').bind('contextmenu', function(){

    // Handle right-click event.
    return false;
});

jQueryのevent.whichを使用して、押されたボタンを判別することもできますが、デフォルトのコンテキストメニューイベントをキャンセルする必要があります。

   // Cancel default oncontextmenu event.
    $(element).bind('contextmenu', function(){ return false });

    $(element).mousedown(function(event){

        switch (event.which)

            case 1:
            // Left mouse
            break;

            case 2:
            // Middle mouse
            break;

            case 3:
            // Right mouse.
            break;

    });

私はこれをIE6（Wineの下）、Chrome 11、Firefox 3.6、Opera 11、Safariでテストしました。

于 2011-06-09T01:09:06.363 に答える
4

申し訳ありませんが、これがコップアウトの「答え」であることはわかっています。なぜなら、Webkitブラウザーが入力フィールドのイベントをいじるのを嫌う理由を正確に理解できなかったからですが、これは機能します。したがって、解決策は、リスナーをウィンドウ全体に適用してから、ターゲットにエフェクトを適用するクラスがあるかどうかを尋ねて、そこから移動することです。正直なところ、これはとにかくおそらくより良い解決策です。なぜなら、私の特定のアプリケーションでは、これにより、この機能を必要な要素に適用できるからです。

var _class = "input.hideRightClick";

this.setListeners = function() {
    $(window).click(function(e) {
        if($(e.target).is(_class))
        {
            e.preventDefault(); 
            alert("hide!");
        }
    });
}
于 2010-05-13T16:56:26.327 に答える
0

Firefox 3.6でテストしたところ、最初のifステートメントに進んでいるため、e.preventDefault（）が呼び出されることはありません。

  var webKit = !$.browser.msie && e.button == 0; // TRUE IN FIREFOX 3.6

  var ie = $.browser.msie && e.button == 1;

  if(webKit||ie)
  { 

   // Left mouse...do something()

  } else if(e.button == 2) {
   e.preventDefault(); 

   // Right mouse...do something else();
  }
于 2010-04-29T18:41:34.800 に答える