jQuery: preventDefault() не работает над событиями ввода/щелчка?
Я хочу отключить contextMenu по умолчанию, когда пользователь щелкает правой кнопкой мыши на поле ввода, чтобы я мог показать пользовательский contextMenu. Вообще говоря, его довольно легко отключить меню правой кнопкой мыши, сделав что-то вроде:
$([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.кнопка, которую вы получите 1 или 0 для слева и 2 справа...но он просто смеется надо мной и все еще показывает проклятое меню по умолчанию!
2) Если я поставлю селектор jQuery на любой другой элемент (кроме ввода), тогда все будет работать, FF будет уважать вызов preventDefault (), и меню правой кнопки мыши по умолчанию не будет отображаться.
3 ответов
кросс-браузерное решение для отключения контекстного меню по умолчанию:
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.
Извините, ребята, я знаю, что это "ответ", потому что я никогда не мог понять, почему браузеры webkit не любят, когда вы возитесь с событиями полей ввода, но все равно, это работает. Поэтому решение состоит в том, чтобы применить прослушиватель ко всему окну, а затем просто спросить, имеет ли цель класс, к которому вы хотите применить эффект...и идите оттуда. Честно говоря, это, вероятно, лучшее решение в любом случае, потому что для моего конкретного приложения это позволяет мне применять эту функциональность к любой элемент, который я хочу.
var _class = "input.hideRightClick";
this.setListeners = function() {
$(window).click(function(e) {
if($(e.target).is(_class))
{
e.preventDefault();
alert("hide!");
}
});
}
Я только что протестировал в 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();
}