欢迎技术交流。 QQ:138986722
1、获取目标
位于事件中心的对象称为目标(target).假设为<div/>元素分配onclick事件处理函数、触发click事件时、<div/>就被认为是目标。IE、目标包含在event对象的srcElement属性中:
var oTarget = oEvent.srcElement;
在DOM兼容的浏览器中、目标包含在target属性中:
var oTarget = oEvent.target;
示例:
<div id="divId" οnclick="testFunction(event)">点击 </div>
<script type="text/javascript" >
var sUserAgent = navigator.userAgent;
var isIE = sUserAgent.indexOf("compatible") > -1 && sUserAgent.indexOf("MSIE") > -1;
var isMoz = sUserAgent.indexOf("Gecko") > -1;
function testFunction(oEvent){
if(isIE){
alert("IE");
var oEvent = window.event;
//IE、目标包含在event对象的srcElement属性中:
var oTarget = oEvent.srcElement;
alert(oTarget.innerText);
return;
}
if(isMoz){
alert("火狐: "+oEvent);
/**
*
* 直接innerText这样火狐不支持、它支持innerHTML
* 所以要用innerText需要处理一下.
*
* 让火狐兼容innerText**/
HTMLElement.prototype.__defineGetter__("innerText",
function ()
{
var anyString = "";
var childS = this.childNodes;
for (var i = 0; i < childS.length; i++)
{
if (childS[i].nodeType == 1)
anyString += childS[i].tagName == "BR"
? "\r\n" : childS[i].textContent;
else if (childS[i].nodeType == 3)
anyString += childS[i].nodeValue;
}
return anyString;
});
HTMLElement.prototype.__defineSetter__("innerText",
function (sText)
{
this.textContent = sText;
});
/**end**/
//在DOM兼容的浏览器中、目标包含在target属性中:
var oTarget = oEvent.target;
alert(oTarget.innerText);
return;
}
}
</script>
2、阻止某个事件的默认行为IE必须将returnValue属性设值为false:
oEvent.returnValue = false;
而在Mozilla中、只要调用preventDefault()方法:
oEvent.preventDefault();
用户右击页面时、阻止他使用菜单。只要阻止contextmenu事件的默认行为就可以了:
doucment.body.oncontextmenu = function (oEvent){
if(isIE){
oEvent = window.event;
oEvent.returnValue = false;
}else{
oEvent.preventDefault();
}
};
3、停止事件复制(冒泡)
IE中、要阻止事件进一步冒泡、必须设置cancelBubble属性为true:
oEvent.cancelBubble = true;
在Mozilla中、只需调用stopPropagation()方法:
oEvent.stopPropagation();
停止事件复制可以阻止事件流中的其它对象的事件处理函数执行、点击下面button按钮会弹出input、body、html这是因为事件先从input元素冒泡到body、然后到html :
<html οnclick="alert('html');">
<head>
<title>停止事件复制(冒泡)</title>
</head>
<body οnclick="alert('body');">
<input type="button" οnclick="alert('input');" value="点击" />
</body>
</html>
下面就在按钮上停止复制(冒泡):
<html οnclick="alert('html');">
<head>
<title>停止事件复制(冒泡)</title>
<script type="text/javascript">
var sUserAgent = navigator.userAgent;
var isIE = sUserAgent.indexOf("compatible") > -1 && sUserAgent.indexOf("MSIE") > -1;
function testClick(oEvent){
alert("input");
if(isIE){
var oEvent = window.event;
oEvent.cancelBubble = true;
}else{
oEvent.stopPropagation();
}
}
</script>
</head>
<body οnclick="alert('body');">
<input type="button" οnclick="testClick(event);" value="点击" />
<br />
</body>
</html>