Js实现自定义右键行为

自定义右键行为（通过事件对象获得鼠标的坐标（x,y））

<！doctype html><html><head><meta charset="UTF-8"><title>demo</title><style type="text/css">html{height:100%;}body{height:100%;}#mydiv{width:300px;height:300px;background-color: #ff7400;}#ctxMenu{background-color: #ff7400;list-style-type: none;position: absolute;padding:0px;border:1px solid #000;visibility: hidden;}</style></head><body><div id="mydiv"></div><h2 id="show"></h2><input type="text"id="txt"><span id="help"></span><ul id="ctxMenu"><li>上传</li><li>下载</li><li>新建</li><li>取消</li></ul><script type="text/javascript">var $=function（id）{return document.getElementById（id）;};var h2=$（"show"）;var ctx=$（"ctxMenu"）;var txt=$（"txt"）;var help=$（"help"）;/*txt.onfocus=function（）{help.innerHTML="请输入金额";}txt.onkeydown=function（event）{help.innerHTML="";var code=event.keyCode;if（！（code>=48&&code<=57||code>=96&&code<=105||code==46||code==8||code==13||code==37||code==39||code==110||code==190））{event.preventDefault（）;}}*/document.body.oncontextmenu=function（event）{event.preventDefault（）;var x=event.pageX;var y=event.pageY;ctx.style.left=x+"px";ctx.style.top=y+"px";ctx.style.visibility="visible";}document.body.onclick=function（）{ctx.style.visibility="hidden";}/*document.body.onmousemove=function（event）{var x=event.pageX;var y=event.pageY;h2.innerHTML=x+":"+y;}*/window.onbeforeunload=function（）{var v=$（"txt"）.value;if（v）{return "";}}$（"mydiv"）.onclick=function（）{$（"show"）.innerHTML="click";};$（"mydiv"）.ondblclick=function（）{$（"show"）.innerHTML="dblclick";};$（"mydiv"）.onmouseover=function（）{$（"show"）.innerHTML="mouseover";this.style.backgroundColor="#2d2d2d";};$（"mydiv"）.onmouseout=function（）{$（"show"）.innerHTML="mouseout";this.style.backgroundColor="pink";}</script></body></html>

以上就是本文给大家分享的全部内容了，希望大家能够喜欢。
请您花一点时间将文章分享给您的朋友或者留下评论。我们将会由衷感谢您的支持！