欢迎各位兄弟 发布技术文章
这里的技术是共享的
今天来记录下js来自定义鼠标右键,同样先来分解下它的实现原理:
1、屏蔽右键默认事件;(一度我以为修改的就是默认事件)
2、对一个ul的隐藏;(这个我也曾迂腐的认为值得这样操作的都是div,汗)
3、对鼠标点击右键做出的响应,显示隐藏的ul;
4、鼠标重新点击后,ul重新被隐藏
这样来看的话,我们需要做的事情是不是就简单了很多,先上代码:
html部分
1 2 3 4 5 | < ul id = "testRight" style = "width: 100px;background-color: yellow;position: absolute;z-index: 100;" > < li >< a href = "#" >开始</ a ></ li > < li >< a href = "#" >暂停</ a ></ li > < li >< a href = "#" >拜拜</ a ></ li > </ ul > |
javascript部分:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 | window.onload= function (){ var forRight=document.getElementById( "testRight" ); //获取对象,现在太熟悉了 forRight.style.display= "none" ; var title=forRight.getElementsByTagName( "li" ); for ( var i=0;i<title.length;i++){ title[i].onmouseover= function (){ this .classname= "active" ; //其实这里我们也可以调用其他事件吧 }; title[i].onmouseout= function (){ //这里也是鼠标的两个事件吧 this .classname= "" ; }; } document.oncontextmenu= function (event){ //这是实现的关键点 var event=event||window.event; //这个都不是问题了吧 forRight.style.display= "block" ; forRight.style.left=event.clientX+ "px" ; forRight.style.top=event.clientY+ "px" ; //鼠标的坐标啊 return false ; //这里返回false就是为了屏蔽默认事件 }; document.onclick= function (){ //就是为了更形象的模仿啊 forRight.style.display= "none" ; }; }; |
先来看今天记录的最关键的地方:document.oncontextmenu这个事件返回false的话就是屏蔽默认事件,如果我们其他都不写,只在这个事件里面写return,好像就下面这样
1 2 3 | document.oncontextmenu= function (){ return false ; } |
这样的话,再点击右键也不会出现任何响应了。然后返回来再看整个的事件应用,好像除了这个事件,其他的都是比较熟悉的事件了,可就是对事件的这种整合总是缺乏,关键还是思路是创意吧,不过先不管哪儿多了,先整吧,但求熟读三千首,不求写来只问吟。扎马步,扎马步,扎马步.....
来自 http://www.jb51.net/article/51422.htm