由于网页中的节点会继承上级节点的事件，可有时候这个事件继承并不是我们需要的，所以就需要对它进行屏蔽，一般我们写上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>
这样就可以保证在div上单击时提示的是“您当前点击的是div”，而在按钮上单击时显示的是“您当前点击的是button”，这句“您当前点击的是div”就不会显示了。
同样在div上点右键也会提示“您当前点击的是div”，而在按钮上右键就不会提示了，
var ev = new Event(e);
ev.stopEvent();
关键就是上面这句代码，这个参数e就是event了。
以上代码在ie以及firefox中测试通过。
分享到：
相关推荐
删除DOM节点删除DOM节点删除DOM节点删除DOM节点删除DOM节点删除DOM节点删除DOM节点删除DOM节点删除DOM节点删除DOM节点删除DOM节点删除DOM节点删除DOM节点删除DOM节点删除DOM节点删除DOM节点删除DOM节点删除DOM节点...
JS原生判断DOM节点是否存在页面中 JavaScript原生函数没有提供判断DOM节点是否存在方法，我们通常获取DOM节点几乎都是document.getElement..方法，会返回一个object数组合集，我们可以通过object[0]，object[1]这样...
dom节点的添加与删除适合初级阅读，有解说
DOM事件（ppt）DOM事件（ppt）DOM事件（ppt）DOM事件（ppt）DOM事件（ppt）DOM事件（ppt）DOM事件（ppt）DOM事件（ppt）DOM事件（ppt）DOM事件（ppt）DOM事件（ppt）DOM事件（ppt）DOM事件（ppt）DOM事件（ppt）DOM...
html DOM 节点的各种高度属性,避免开发理解上的误区
07.Dom-节点操作
vdom-to-html, 将虚拟DOM节点转换为 HTML vdom-to-html 将虚拟dom节点转换为 HTML安装npm install --save vdom-to-html用法var VNode = require('virtual-dom
DOM 节点 DOM 节点树 DOM 节点访问 DOM 节点信息 DOM How To DOM 参考 DOM 总结 DOM 实例 DOM 实例 DOM 对象 DOM Window DOM Navigator DOM Screen DOM History DOM Location DOM Document DOM Anchor...
主要介绍了JS实现动态添加DOM节点和事件的方法,涉及javascript事件响应及针对页面dom元素节点与属性的动态操作相关实现技巧,需要的朋友可以参考下
JavaScript获取HTML DOM节点元素的方法的总结
在javascript中，用DOM节点去实现表格内容移上 移下的效果 以及对表格进行添加删除等功能的实现。
web前端的朋友们,经常会遇到给由后台返回的数据遍历生成的DOM绑定事件,但是总是绑定不上,那是因为把事件直接绑定到了动态生成的DOM上了,正确的方式是利用事件冒泡给其父元素绑定，这样才能解决问题的哦！
• DOM 节点 • DOM 节点树 • DOM 解析 • DOM 加载 • DOM 属性和方法 • DOM 访问节点 • DOM 节点信息 • DOM 节点列表 • DOM 遍历节点 • DOM 浏览器 • DOM 定位节点 节点操作 • DOM 获取节点 • DOM 改变...
dom4j解析节点名称和值,放入一个string类型的xml字符串输出标签对应的名称以及值的map
chrome根据dom找到dom上的事件.zip
使用Jsoup库解析HTML、XML或URL链接中的DOM节点 Jsoup进行Html的Dom解析
DOM节点中元素节点与文本节点操作方法
JavaScript之DOM事件（源代码）JavaScript之DOM事件（源代码）JavaScript之DOM事件（源代码）JavaScript之DOM事件（源代码）JavaScript之DOM事件（源代码）JavaScript之DOM事件（源代码）JavaScript之DOM事件（源...
js dom操作节点仿视频网站文字幕动画代码
dom-to-image：使用HTML5 canvas从DOM节点生成图像