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

UPDATED:

The default function of middle mouse button can't be disabled in firefox. As stated here.

Firefox and the other Gecko browsers have released control of the right mouse button, but the default action of a middle click can not be disabled. You can change what the default action is by editing the middlemouse settings on the "about:config" URL, but Javascript can't cancel them.

You can find similar link of your post here.

The very close working solution in some modern browser (like Chrome) is:

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;

}

并用 a 替换锚点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 回答