jQuery：入力/クリックイベントで動作していないPreventDefault（）？

StackOverflow https://stackoverflow.com/questions/2739627

質問

ユーザーが入力フィールドを右クリックしたときにデフォルトの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つを取得しますが、それは私を笑い、まだDAMNEDデフォルトメニューを表示します！

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

役に立ちましたか？

解決 2

申し訳ありませんが、WebKitブラウザが入力フィールドイベントをいじっていないのを好まない理由を正確に理解できなかったので、これは警官の「答え」であることを知っています。そのため、解決策は、リスナーをウィンドウ全体に適用し、ターゲットに効果を適用したいクラスがあるかどうかを尋ねることです...そしてそこから行くことです。正直に言うと、これはおそらく私の特定のアプリケーションでは、この機能を私が望むあらゆる要素に適用できるため、おそらくより良い解決策です。

var _class = "input.hideRightClick";

this.setListeners = function() {
    $(window).click(function(e) {
        if($(e.target).is(_class))
        {
            e.preventDefault(); 
            alert("hide!");
        }
    });
}

他のヒント

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

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

ContextMenuイベントをキャプチャするには、指定された要素の内部でのみ使用します。

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

    // Code to handle event
    return false;
}

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

jquery：

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

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

jQueryのイベントを使用することもできます。これは、どのボタンを押したかを判断しますが、デフォルトのContextmenuイベントをキャンセルする必要があります。

   // 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（ワインの下）、Chrome 11、Firefox 3.6、Opera 11、Safariでテストしました。

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();
  }
ライセンス： CC-BY-SA と 帰属
所属していません StackOverflow
scroll top