js跨浏览器事件处理程序
<!DOCTYPE html> <html> <head> <meta charset="utf-8"/> </head> <body> <div id="myDiv"> aaaaaaaaaaaaaaaaaaa </div> <ul id="myMenu" style="position:absolute;visibility:hidden;background-color:silver;"> <li> <a href="">sasdsasdasdadasd</a> </li> <li> <a href="">saswerwerwedgddadasd</a> </li> <li> <a href="">sasdwewrwreadasd</a> </li> </ul> <script type="text/javascript"> var EventUtil = { addHandler: function(element, type, handler) { if (element.addEventListener) { element.addEventListener(type, handler, false); } else if (element.attachEvent) { element.attachEvent("on" + type, handler); } else { element["on" + type] = handler; } }, getEvent: function(event) { return event ? event : window.event; }, getTarget: function(event) { return event.target || event.srcElement; }, getRelatedTarget: function(event) { if (event.relatedTarget) { return event.relatedTarget; } else if (event.toElement) { return event.toElement; } else if (event.fromElement) { return event.fromElement; } else { return null; } }, getButton: function(event) { if (document.implementation.hasFeature("MouseEvents", "2.0")) { return event.button; } else { switch (event.button) { case 0: case 1: case 3: case 5: case 7: return 0; case 2: case 6: return 2; case 4: return 1; } } }, getCharCode: function(event) { if (typeof event.charCode == "number") { return event.charCode; } else { return event.keyCode; } }, getWheelDelta: function(event) { if (event.wheelDelta) { return (client.engine.opera && client.engine.opera < 9.5 ? -event.wheelDelta : event.wheelDelta); } else { return -event.detail * 40; } }, getClipboardText: function(event) { var clipboardData = (event.clipboardData || window.clipboardData); return clipboardData.getData("text"); }, setClipboardText: function(event, value) { if (event.clipboardData) { return event.clipboardData.setData("text/plain", value); } else if (window.clipboardData) { return window.clipboardData.setData("text", value); } }, preventDefault: function(event) { if (event.preventDefault) { event.preventDefault(); } else { event.returnValue = false; } }, removeHandler: function(element, type, handler) { if (element.removeEventListener) { element.removeEventListener(type, handler, false); } else if (element.detachEvent) { element.detachEvent("on" + type, handler); } else { element["on" + type] = null; } }, stopPropagation: function(event) { if (event.stopPropagation) { event.stopPropagation(); } else { event.cancelBubble = true; } } }; EventUtil.addHandler(window,'load',function(event){ var div=document.getElementById('myDiv'); EventUtil.addHandler(div,'contextmenu',function(event){ event=EventUtil.getEvent(event); EventUtil.preventDefault(event); var menu=document.getElementById("myMenu"); menu.style.left=event.clientX+'px'; menu.style.top=event.clinetY+'px'; menu.style.visibility='visible'; }); EventUtil.addHandler(document,'click',function(event){ document.getElementById("myMenu").style.visibility="hidden"; }); }); </script> </body> </html>当你点击aaa部分,ul显示的位置跟随你鼠标位置去显示,自己加下css样式和弄个定时器,可以做出非常绚丽的效果
郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。