jQuery:dreventDefault()不适用于输入/单击事件?
-
02-10-2019 - |
题
当用户右键单击输入字段时,我想禁用默认的ContextMenu,以便我可以显示自定义上下文Menu。一般而言,通过执行类似的操作来禁用右键菜单很容易:
$([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
编辑:
抱歉,在阅读评论后,我意识到我应该澄清一些事情。
1)从某种意义上说,上面的代码确实有效。该代码能够通过单击哪个按钮进行排序,我不在乎我说e.preventdefault(),右键单击菜单仍然弹出。换句话说,如果您在e.button上发出警报,则左将获得1或0的警报,而右2则却嘲笑我,但仍然显示该死的默认菜单!
2)如果我将jQuery选择器放在任何其他元素上(输入除外),那么所有内容都将起作用,FF将尊重dreventdefault()调用()呼叫,默认右键单击菜单将不会显示。
解决方案 2
抱歉,我知道这是一个警察的“答案”,因为我永远无法确切地弄清楚为什么Webkit浏览器不喜欢您弄乱输入现场事件,但是无论如何,这都可以。因此,解决方案是将侦听器应用于整个窗口,然后询问目标是否具有要应用效果的类,然后从那里运行。老实说,无论如何,这可能是一个更好的解决方案,因为对于我的特定应用程序,这使我可以将此功能应用于我想要的任何元素。
var _class = "input.hideRightClick";
this.setListeners = function() {
$(window).click(function(e) {
if($(e.target).is(_class))
{
e.preventDefault();
alert("hide!");
}
});
}
其他提示
跨浏览器解决方案可禁用默认上下文菜单:
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(葡萄酒下),Chrome 11,Firefox 3.6,Opera 11和Safari中对此进行了测试。
我刚刚在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();
}