2

私はそのような問題を抱えています:クリックすると、現在のページの上部にあるモーダルダイアログで ajaxFormDialog を開くリンクがあります。しかし、中央のボタンをクリックすると、新しいタブで開き、すべてがモーダルウィンドウではなく、現在新しいタブページにあり、見た目が悪いです。それで、私の質問は、現在のリンクで中マウスボタンのクリックを無効にするにはどうすればよいですか?

<a class="ajaxFormDialog" ...></a>
<script>
    $(function (){
       $('a.ajaxFormDialog').live("click", function(e) {
           $.ajax({
                type: "POST",
                url: $("#formContent form").attr("action"),
                data: $("#formContent form").serialize(),
                success: function(data) {
                            //... do something
                         }
                 });
       });
</script>

UPD私はあなたの提案を使用しました

if(e.which == 2) {
   e.preventDefault();
}

デフォルトを防止する可能性がありますが、そのフォームで新しいタブを開きます。リンクを中/マウスホイール ボタンでクリックしても、彼がこの $(function (){ $('a.ajaxFormDialog').on("click", function(e) { .. .

UPD2私はそのようなコードを書きました:

$(function (){
   $('a.ajaxFormDialog').live("click", function(e) {
       console.log("Which button is clicked: " + e.which);
       if(e.which == 2) {
          e.preventDefault();
       }
       // rest of the code...

そのため、マウスの左ボタンをクリックすると、コンソールに「どのボタンがクリックされたか: 1」と表示されますが、中央/マウスホイール ボタンをクリックすると何も表示されず、新しいタブで開きます。

4

3 に答える 3

2 
$("a.ajaxFormDialog").on('click', function(e) { 
   if( e.which == 2 ) {
      e.preventDefault();
   }
});
于 2013-06-21T11:30:24.760 に答える
1

更新:

マウスの中ボタンのデフォルト機能は、Firefox で無効にすることはできません。ここで述べたように。

Firefox およびその他の Gecko ブラウザーでは、マウスの右ボタンの制御が解放されていますが、中クリックのデフォルト アクションを無効にすることはできません。「about:config」URL のミドルマウス設定を編集することで、デフォルトのアクションを変更できますが、Javascript はそれらをキャンセルできません。

あなたの投稿の同様のリンクをここで見つけることができます。

一部の最新のブラウザー (Chrome など) で非常によく機能するソリューションは次のとおりです。

if (event.preventDefault)
    event.preventDefault();
else
    event.returnValue= false;
return false;
于 2013-06-21T12:02:48.813 に答える
1

Firefox (そしておそらく Opera も) は開発者の手からミドルクリックの動作を取り除いたので、アンカー ノードを別のノードに置き換えることをお勧めします<span>。

<a>これは、使用シナリオではタグが実際のリンクとして機能しなくなったため、意味的には問題ないようです。CSS を使用して外観を維持できます。

実際の例は、このjsfiddleにあります。

この種のマークアップの場合:

<a class="ajaxFormDialog" href="#">replaced link</a>

次のような CSS を使用できます。

a, .ajaxFormDialog {
    color: orange;
    text-decoration: underline;
    cursor: hand;
}

a:hover, .ajaxFormDialog:hover {
    background: orange;
    color: white;

}

アンカーを に置き換えますspan。これには、必要なプロパティを格納し、子ノード (存在する場合) を維持する機能が含まれます。これらのプロパティは、後でイベント ハンドラーで取得できます。

コード例は次のとおりです。

var genericHandler = function(e) {
    var el = $(e.target);
    var href = el.data('href');
    //extract data
    console.log('clicked span: ',el, ' with stored href: ', href);
    //do stuff here
};

$('a.ajaxFormDialog').replaceWith(function(){
    var el = $(this);
    console.log('replacing element: ', el);
    return $("<span>").addClass('ajaxFormDialog').append($(this).contents()).
        data('href', el.attr('href')). //you can store other data as well
        click(genericHandler);
});

現時点では、ミドルクリックの副作用を避けたい場合、これはすべての悪の中で最も小さいようです.

于 2013-06-22T23:48:43.233 に答える