屏蔽dom的上级节点的事件

最新推荐文章于 2022-01-20 11:37:24 发布

iteye_6844

最新推荐文章于 2022-01-20 11:37:24 发布

阅读量260

点赞数

分类专栏： javascript 文章标签： prototype IE Firefox 浏览器 XHTML

javascript 专栏收录该内容

24 篇文章 0 订阅

订阅专栏

由于网页中的节点会继承上级节点的事件，可有时候这个事件继承并不是我们需要的，所以就需要对它进行屏蔽，一般我们写上event.cancelBubble=true;就可以解决了，但这个并不一定适用于所有事件以及适应大部分浏览器。
下面的这个方法就可以解决这个问题，代码如下：
以下是html代码：


<!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> new document </title>
 </head>
 <body>
 <div id="parentN" style="height:300px;background-color:#EEEEEE;">
 <button id="bt" style="border:1px solid windowtext;background-color:#C3EFEF;">屏蔽上级dom的click事件</button>
 </div>
 </body>
</html>

以下是js代码：


  <script>

Event = function(e){
	this.et = e;
}

Event.prototype.stopEvent = function(){
	this.stopPropagation();
	this.preventDefault();
}

Event.prototype.stopPropagation = function(){
	var ev = this.et;
    if (ev.stopPropagation) {
        ev.stopPropagation();
    } else {
        ev.cancelBubble = true;
    }
}

Event.prototype.preventDefault = function(){
	var ev = this.et;
    if(ev.preventDefault) {
        ev.preventDefault();
    } else {
        ev.returnValue = false;
    }
}

Event.on = function(dom,eventName,callFunc,scope,config){
	var scope = scope||window;
	var config = config || {};
	var h = function(e){
		var evt = window.event || e;
		callFunc.call(scope,evt,config);
	}
	if(eventName == "mousewheel" && dom.addEventListener){ 
        dom.addEventListener("DOMMouseScroll", h, false);
    }
	else{
		if(window.attachEvent){
			dom.attachEvent("on"+eventName, h);
		}
		else if(window.addEventListener){
			dom.addEventListener(eventName, h,false);
		}
	}
}

function divClick(e){
	alert("您当前点击的是div");
	var ev = new Event(e);
	ev.stopEvent();
}

function buttonClick(e){
	var ev = new Event(e);
	ev.stopEvent();
	alert("您当前点击的是button");
}

function onScroll(e){
	var ev = new Event(e);
	ev.stopEvent();
}

window.onload = function(){
	Event.on(document.getElementById("parentN"),"click",divClick,window);
	Event.on(document.getElementById("parentN"),"contextmenu",divClick,window);
	Event.on(document.getElementById("bt"),"click",buttonClick,window);
	Event.on(document.getElementById("bt"),"contextmenu",function(e){
		var ev = new Event(e);
	ev.stopEvent();
	},window);

}
  </script>