我想实现鼠标右击时,触发某个事件.
应该怎么做呢,求具体代码!
非常简洁高效的JS右键菜单
在制作网页的时候,我们很经常需要用到右键菜单,网上这类的控件很多,很眩. 但这类控件一般都比较大,需要写的代码比较多,而且样式比较固定. 而本组件相对简单高效, 定制性很强, 菜单全由自己DIY!
function csMenu(_object, _menu)
{
this.IEventHander = null;
this.IFrameHander = null;
this.IContextMenuHander = null;
this.Show = function(_menu)
{
var e = window.event || event;
if (e.button == 2)
{
if (window.document.all)
{
this.IContextMenuHander = function(){return false;};
document.attachEvent("oncontextmenu", this.IContextMenuHander);
}
else
{
this.IContextMenuHander = document.oncontextmenu;
document.oncontextmenu = function(){return false;};
}
window.csMenu$Object = this;
this.IEventHander = function(){window.csMenu$Object.Hide(_menu);};
if (window.document.all)
document.attachEvent("onmousedown", this.IEventHander);
else
document.addEventListener("mousedown", this.IEventHander, false);
_menu.style.left = e.clientX;
_menu.style.top = e.clientY;
_menu.style.display = "";
if (this.IFrameHander)
{
var _iframe = document.getElementById(this.IFrameHander);
_iframe.style.left = e.clientX;
_iframe.style.top = e.clientY;
_iframe.style.height = _menu.offsetHeight;
_iframe.style.width = _menu.offsetWidth;
_iframe.style.display = "";
}
}
};
this.Hide = function(_menu)
{
var e = window.event || event;
var _element = e.srcElement;
do
{
if (_element == _menu)
{
return false;
}
}
while ((_element = _element.offsetParent));
if (window.document.all)
document.detachEvent("on"+e.type, this.IEventHander);
else
document.removeEventListener(e.type, this.IEventHander, false);
if (this.IFrameHander)
{
var _iframe = document.getElementById(this.IFrameHander);
_iframe.style.display = "none";
}
_menu.style.display = "none";
if (window.document.all)
document.detachEvent("oncontextmenu", this.IContextMenuHander);
else
document.oncontextmenu = this.IContextMenuHander;
};
this.initialize = function(_object, _menu)
{
window._csMenu$Object = this;
var _eventHander = function(){window._csMenu$Object.Show(_menu);};
_menu.style.position = "absolute";
_menu.style.display = "none";
_menu.style.zIndex = "1000000";
if (window.document.all)
{
var _iframe = document.createElement('iframe');
document.body.insertBefore(_iframe, document.body.firstChild);
_iframe.id = _menu.id + "_iframe";
this.IFrameHander = _iframe.id;
_iframe.style.position = "absolute";
_iframe.style.display = "none";
_iframe.style.zIndex = "999999";
_iframe.style.border = "0px";
_iframe.style.height = "0px";
_iframe.style.width = "0px";
_object.attachEvent("onmouseup", _eventHander);
}
else
{
_object.addEventListener("mouseup", _eventHander, false);
}
};
this.initialize(_object, _menu);
}
=======================需要显示的菜单,一般用DIV======================
============================调用方法===============================
var MM = new csMenu(document.getElementById("Table1"), document.getElementById("Menu1"));
其中, document.getElementById("Table1") 就是需要显示菜单的区域控件.
document.getElementById("Menu1") 就是菜单DIV控件.
document.getElementById("test").onmouseup=function(oEvent) {
if (!oEvent) oEvent=window.event;
if (oEvent.button==2) {
//-- do something for user right click
// alert("Mouse up");
}
}
<script>
document.oncontextmenu = function () { alert('按下右键!'); }
</script>
<html>
<script type="text/javascript">
<!--
document.onmousedown = function(e){
var e = e || window.event
alert("e"+e.button);
if(e.button == "2"){
alert("执行右键代码");
}
}
//-->
function right()
{
var e=window.event;
alert(e.button);
if(e.button=="0"){
alert("左键");
}else{
alert("右键");
}
}
</script>
<table border=1>
<tr id=test name=test height=200 onmousedown="right()" ><td>88888888888888888888888888</td></tr>
</table>
</html>
编写右击事件一般可分为一下几步:
一、捕获,捕获右击事件很简单,楼上的同仁都已做了清楚的回答;
二、阻止默认右击事件,浏览器默认的会为右击事件做出响应,即我们点击右键时看到的菜单,要想対右键点击事件做出明确的响应,这一步是非常重要的一步;
三、编写自己的处理逻辑;