第一步我们要屏蔽浏览器默认的右键点击行为，即阻止d出框。
首先要将阻止d出函数绑定到目标元素上：
//阻止浏览器默认右键点击事件
$("div").bind("contextmenu",
function(){
return
false
})
如此一来，div元素的右击事件就被屏蔽了，而浏览器其他区域不受影响，如果你想在整个页面屏蔽右击事件，只需这样做：
document.oncontextmenu
=
function()
{
return
false
}
接下来就可以为元素绑定右击响应函数了：
$("div").mousedown(function(e)
{
console.log(e.which)
//右键为3
if
(3
==
e.which)
{
$(this).css({
"font-size":
"-=2px"
})
}
else
if
(1
==
e.which)
{
//左键为1
$(this).css({
"font-size":
"+=3px"
})
}
})
示例效果为右击字体缩小，左击字体变大，且其它区域可以响应默认右击事件。
完整代码：
<head>
<style
type="text/css">
div{
font-size:20px
}
</style>
<script
src="../jquery.js"></script>
<script>
$(function()
{
//阻止浏览器默认右键点击事件
/*document.oncontextmenu
=
function()
{
return
false
}*/
//某元素组织右键点击事件
$("div").bind("contextmenu",
function(){
return
false
})
$("div").mousedown(function(e)
{
console.log(e.which)
//右键为3
if
(3
==
e.which)
{
$(this).css({
"font-size":
"-=2px"
})
}
else
if
(1
==
e.which)
{
//左键为1
$(this).css({
"font-size":
"+=3px"
})
}
})
})
</script>
</head>
<body>
<div>
div
</div>
</body>
以上这篇jQuery自定义元素右键点击事件(实现案例)就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持脚本之家。
js右击事件
先贴代码：
注意的两个点是：
①：先取消默认右击事件,event.preventDefault()
②：判断event.Button:0:左键，1：滚轮，2：右键。
值得一说的的是"oncontextmenu"是指右键按下时的作用。
再给一个应用吧：
右击div显示出自己定义的菜单，点击除了div的地方，是默认的右击事件。
代码：
效果自行查看吧，其实也没啥。
原理是，右键的菜单其实是一个隐藏的div,当点击父类div的时候，它出现而已。（貌似这样一说显得这个程序好垃圾啊，_(___)_其实这也是大厦的一块砖，少了它，大厦会塌的）
再给了类似的应用吧,一个点击div消失的效果。
DOM3级事件中定义了9个鼠标事件。
mousedown:鼠标按钮被按下（左键或者右键）时触发。不能通过键盘触发。
mouseup:鼠标按钮被释放d起时触发。不能通过键盘触发。
click:单击鼠标 左键 或者按下回车键时触发。这点对确保易访问性很重要，意味着onclick事件处理程序既可以通过键盘也可以通过鼠标执行。
dblclick:双击鼠标 左键 时触发。
mouseover:鼠标移入目标元素上方。鼠标移到其后代元素上时会触发。
mouseout:鼠标移出目标元素上方。
mouseenter:鼠标移入元素范围内触发， 该事件不冒泡 ，即鼠标移到其后代元素上时不会触发。
mouseleave:鼠标移出元素范围时触发， 该事件不冒泡 ，即鼠标移到其后代元素时不会触发。
mousemove:鼠标在元素内部移到时不断触发。不能通过键盘触发。
document.oncontextmenu =function(){return false}
document.body.onmouseup =function(e){
if(e.button===2){
console.log("右键")
that.rightHand =true
}else if(e.button===1) {
console.log("中间键")
}else {
console.log("左键")
}
}
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）