JQuery: предотвратите дефолт () не работает на событиях ввода / клика? - PullRequest
Новая
       32

JQuery: предотвратите дефолт () не работает на событиях ввода / клика?

8 голосов
/ 29 апреля 2010

Я хочу отключить контекстное меню по умолчанию, когда пользователь щелкает правой кнопкой мыши поле ввода, чтобы я мог показать пользовательское контекстное меню. Вообще говоря, довольно просто отключить контекстное меню, выполнив что-то вроде: 

$([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

EDIT:

Извините, после прочтения комментариев я понимаю, что должен уточнить некоторые вещи.

1) Код выше работает ... в некотором смысле. Код может отсортировать, по какой кнопке была нажата кнопка, ему просто все равно, что я говорю e.preventDefault (), и по-прежнему появляется меню, вызываемое правой кнопкой мыши. Другими словами, если вы поместите предупреждение на кнопку e.button, вы получите 1 или 0 для левого и 2 для правого ... но он просто смеется надо мной и по-прежнему показывает проклятое меню по умолчанию!

2) Если я установлю селектор jQuery на ЛЮБОЙ другой элемент (кроме ввода), тогда все будет работать, FF будет уважать вызов warnDefault () и меню по умолчанию, вызываемое правой кнопкой мыши, не будет отображаться.

Ответы [ 3 ]

11 голосов
/ 09 июня 2011

Кросс-браузерное решение для отключения контекстного меню по умолчанию: 

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 (под Wine), Chrome 11, Firefox 3.6, Opera 11 и Safari.

3 голосов
/ 13 мая 2010

Извините, ребята, я знаю, что это "отговорочный" ответ, потому что я так и не смог точно понять, почему браузерам webkit не нравится, когда вы возитесь с событиями поля ввода, но как бы то ни было, это работает. Таким образом, решение состоит в том, чтобы применить слушателя ко всему окну, а затем просто спросить, есть ли у цели класс, к которому вы хотите применить эффект ... и перейти оттуда. Если честно, в любом случае это, вероятно, лучшее решение, потому что для моего конкретного приложения это позволяет мне применять эту функциональность к любому элементу, который я хочу. 

var _class = "input.hideRightClick";

this.setListeners = function() {
    $(window).click(function(e) {
        if($(e.target).is(_class))
        {
            e.preventDefault(); 
            alert("hide!");
        }
    });
}
0 голосов
/ 29 апреля 2010

Я только что протестировал в 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();
  }
...