1、在html中,按钮有双击事件,单击事件,但没有右击事件,js中却有关于改变鼠标右击的功能,那这样,可以配合鼠标onmouseover事件将鼠标设置右击事件。当然此处不止可以在button里设置,也可以在别的标签里设置,在这里以button为例。
<input type="button" id="b1" οnmοuseοver="right(this.id)"/>
在js中:
<script>
function right(id){
document.getElementById(id).οncοntextmenu=function(){
//在这里可以写你要定义的右击事件
alert("这是一个右击事件");
return false;//返回值为false,避免鼠标原有的右击事件。
}
}
</script>
2、还有一种添加按钮添加右击的方法:用鼠标的onmousedown()方法,获取点击鼠标的button值,,右击时button值为2,左击为1
jsp中:<input type="button" id="b1" οnmοusedοwn="click1(event)"/>
js中:
<script>
function click1(event){
if(event.button==2){
alert("右击事件");
}if(event.button==1){
alert("左击事件");
}
}
</script>
浏览器有的不兼容,大部分浏览器兼容,一般用IE测试就可以。
3、根据第一条,咱们扩展一下,可以将右击事件改变原有的菜单。
思路:将原有的右击菜单改变成自己的菜单,先定义一个隐藏域,或者是一个网页。如果定义隐藏域,点击右键,隐藏域出现,并且坐标为鼠标跟滚动条坐标之和。点击左键时,隐藏菜单
隐藏域如下:
<span id="contextmenu" style="border:1px solid #666666;background:#eeeeee;width:55px;padding:5px;display:none;position:absolute">
<div>
<div>菜单1</div>
<div>菜单2</div>
<div>菜单3</div>
<div>菜单4</div>
<div>菜单5</div>
<div>菜单6</div>
</div>
</span>
js如下:
<script type="text/javascript">
document.οncοntextmenu=function (){
contextmenu.style.posLeft= document.body.scrollLeft+event.x; //滚动条坐标+鼠标坐标
contextmenu.style.posTop= document.body.scrollTop+event.y; //纵坐标同上
contextmenu.style.display="inline" ;//右击后id为contextmenu的对象设置为可见
return false ;
}
document.
//如果 contextmenu 层非当前焦点对象
if(document.activeElement!=contextmenu){
contextmenu.style.display="none";
} //隐藏 contextmenu 层
}
</script>
如果想用window.open();定义菜单也可以,原理都差不多,再次就不多说了。
进***流: 178483774
转载于:https://blog.51cto.com/3795780/1221248