禁用鼠标中键的模态对话框 [英] Disable middle mouse button for modal dialog

问题描述

我有这样一个问题：  我有上点击在当前页面的顶部模态对话框打开ajaxFormDialog链接。但是，当我点击中间的按钮，它在新标签页打开，一切都没有模态窗口，但目前在新标签页，看起来不错。所以，我的问题是，如何可以禁用鼠标中键点击当前链接？

I have such a problem: I have link which on click opens ajaxFormDialog in modal dialog on top of the current page. But when I click middle button, it opens in new tab, and everything is not in modal window, but currently on new tab page and looks bad. So, my question would be, how it is possible to disable middle mouse button click for current link?

<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，但仍然会打开与形式的新标签。 当我点击中等/鼠标滚轮按钮链接它不`吨甚至告诉我，他进入了这个$（函数（）{$（'a.ajaxFormDialog'）。在（点击，功能（五）{..

it maybe preventsDefault, but still opens new tab with that form. When I click with middle/mousewheel button on link it doesn`t even show me, that he entered this $(function (){ $('a.ajaxFormDialog').on("click", function(e) { ...

UPD2 我写了这样的code：

UPD2 I wrote such code:

$(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， 但是当我点击中间的/鼠标滚轮按钮，它显示了我什么，并在新标签中打开还是

So when I click left mouse button, console shows me "Which button is clicked: 1", but when I click middle/mousewheel button it shows me nothing and still opens in new tab.

推荐答案

由于火狐（和，presumably，歌剧院以及）已采取中间点击行为出了开发者的手中，我会建议更换锚节点（S）与不同的节点，例如＆LT;跨度＆GT;

Since Firefox (and, presumably, Opera as well) have taken middle-click behavior out of the developers' hands, I would suggest replacing the anchor node(s) with a different node, e.g <span>.

这似乎语义确定，因为＆LT; A＆GT; 标记不再担任你的使用场景的实际链路。它可以使用CSS维持它的外观。

This seems semantically O.K, since the <a> tag no longer functions as an actual link in your usage scenario. It can maintain its appearance using CSS.

有一个活生生的例子都可以在此找到的jsfiddle 。

A live example can be found in this jsfiddle.

有关这种标记：

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

您可以使用CSS，如：

you can use CSS such as:

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

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

}

和与跨度，系统包括存储任何希望的性能和维护所有子节点（如果有的话）的能力取代锚。您可以在事件处理程序后检索这些属性。

and replace the anchor with a span, including the ability to store any desired property and maintain any child nodes (if any). You can later retrieve those properties in the event handler.

这个例子code是如下：

The example code is as follows:

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);
});

这似乎是万恶之小，如果你想避免中间点击副作用的时刻。

This seems to be the lesser of all evils, if you wish to avoid middle-click side effects, for the moment.

这篇关于禁用鼠标中键的模态对话框的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！