爲模態對話框禁用鼠標中鍵

Question

我有這樣的問題： 我有鏈接，點擊打開當前頁面頂部的模式對話框中的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(); 
} 

它也許preventsDefault，但還是打開與形式的新標籤。 （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」， 但是當我點擊中間的/鼠標滾輪按鈕它沒有顯示任何東西，仍然在新標籤中打開。

Answer 1

由於火狐（和，據推測，歌劇院以及）採取了中間點擊行爲了開發者的手中，我建議用不同的節點替換錨節點，例如<span>。

由於<a>標籤在您的使用場景中不再起到實際鏈接的作用，這在語義上似乎是O.K。它可以使用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); 
}); 

這似乎是一切罪惡的較小的，如果你想避免中間點擊副作用，暫時。

Answer 2

$("a.ajaxFormDialog").on('click', function(e) { 
    if(e.which == 2) { 
     e.preventDefault(); 
    } 
}); 

Answer 3

已更新：

鼠標中鍵的默認功能不能在Firefox中禁用。如上所述here。

Firefox和其他Gecko瀏覽器已經釋放鼠標右鍵的控制權，但不能禁用中點擊的默認操作。您可以通過編輯「about：config」URL中的middlemouse設置來更改默認操作，但Javascript無法取消它們。

你可以找到你的信息here的相似鏈接。

在一些現代瀏覽器中的非常緊密的合作解決方案（如Chrome）是：

if (event.preventDefault) 
    event.preventDefault(); 
else 
    event.returnValue= false; 
return false;