开发学院网页设计 JavaScript Javascript公共脚本库系列(三): 格式化事件对象/事... 阅读

Javascript公共脚本库系列(三): 格式化事件对象/事件对象详解

　2010-09-14 13:40:15　来源：WEB开发网　　　

核心提示： 但是注意不能这么写:<body onkeydown="getKeyCode();">因为上面的代码等同于:body.onkeydown = function(){ getKeyCode();}实例二重写鼠标右键菜单实例代码:<!DOCTYPE html

但是注意不能这么写:

<body onkeydown="getKeyCode();">

因为上面的代码等同于:

body.onkeydown = function() { 　　 getKeyCode(); }实例二　重写鼠标右键菜单实例代码:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" > <head> 　　<title>ScriptHelper 类测试 -- 事件对象实例 -- 重写鼠标右键菜单</title> 　　<script src="http://files.cnblogs.com/zhangziqiu/ScriptHelper.js" type="text/javascript"></script> 　　<style type="text/css"> 　　　　.cursorHand { cursor:pointer;}　　　　　.menu 　　　　{ 　　　　　　background:#FFFFFF none repeat scroll 0 0; 　　　　　　border:1px solid #ACA899; 　　　　　　color:#000000; 　　　　　　font-size:12px; 　　　　　　position:absolute; 　　　　　　display:none; 　　　　} 　　　　.menu ul 　　　　{ 　　　　　　list-style-image:none; 　　　　　　list-style-position:outside; 　　　　　　list-style-type:none; 　　　　　　margin:3px; 　　　　　　padding:3px; 　　　　} 　　　　.menu ul li 　　　　{ 　　　　　　cursor:pointer; 　　　　　　margin-bottom:5px; 　　　　}　　　　　　</style> </head> <body style="position:relative;"> 　　<script type="text/javascript">　　　</script>　　　　　<div>测试文字: 欢迎访问 http://zhangziqiu.cnblogs.com 一起学习,一起进步.</div> 　　<div id="mouseRightButtonMenu" class="menu" onclick="ScriptHelper.cancelBubble();"> 　　　　<ul> 　　　　　　<li id="divMouseMenu1">查看选中内容</li> 　　　　　　<li><a href="http://zhangziqiu.cnblogs.com" target="_blank">返回博客首页</a></li> 　　　　</ul> 　　</div> 　　<script type="text/javascript"> 　　//显示鼠标右键菜单　　function showMouseRightButtonMenu() 　　{ 　　　　ScriptHelper.cancelBubble(); 　　　　var oEvent = ScriptHelper.getEvent(); 　　　　var menu = document.getElementById('mouseRightButtonMenu'); 　　　　if( oEvent.button == 2) 　　　　{ 　　　　　　menu.style.display="block"; 　　　　　　menu.style.left = oEvent.clientX + "px"; 　　　　　　menu.style.top = oEvent.clientY + "px";　　　　　　　　　　　　} 　　} 　　　　//关闭鼠标右键菜单　　function closeMouseRightButtonMenu() 　　{ 　　　　var oEvent = ScriptHelper.getEvent(); 　　　　if( oEvent.button == 0 || oEvent.button == 1) 　　　　{ 　　　　　　ScriptHelper.closeDivCommon('mouseRightButtonMenu'); 　　　　} 　　} 　　　　//空函数,用于取消FireFox默认的鼠标右键菜单　　function blankMethod() 　　{　　　　　return false; 　　} 　　　　//添加鼠标右键菜单的相关事件　　document.onclick= blankMethod; 　　document.ondblclick= blankMethod; 　　ScriptHelper.addEventListener( document, "mousedown", showMouseRightButtonMenu ); 　　ScriptHelper.addEventListener( document, "click", closeMouseRightButtonMenu ); 　　ScriptHelper.addEventListener( document, "contextmenu", blankMethod );　　　　　　　/* 菜单项相关函数 */　　　　　　function mouseMenu1() 　　{ 　　　　ScriptHelper.closeDivCommon("mouseRightButtonMenu"); 　　　　　　　　var selectText = "未选中任何内容"; 　　　　if( window.getSelection ) 　　　　{ 　　　　　　selectText = window.getSelection().toString(); 　　　　} 　　　　else if(document.selection && document.selection.createRange) 　　　　{ 　　　　　　selectText = document.selection.createRange().text; 　　　　} 　　　　if( selectText!=null && selectText!="" ) 　　　　{ 　　　　　　alert(selectText); 　　　　} 　　}　　　　　　var divMouseMenu1 = document.getElementById("divMouseMenu1"); 　　if( divMouseMenu1!=null) 　　{ 　　　　ScriptHelper.addEventListener( divMouseMenu1, "mousedown", mouseMenu1 ); 　　} 　　</script> </body> </html>实例说明: