由于网页中的节点会继承上级节点的事件，可有时候这个事件继承并不是我们需要的，所以就需要对它进行屏蔽，一般我们写上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节点的添加与删除适合初级阅读，有解说
7. **事件处理**：通过`addEventListener`和`removeEventListener`添加和移除事件监听器，使DOM节点响应用户的交互。 8. **DOM更新优化**：由于DOM操作可能导致浏览器重新渲染，频繁操作会降低页面性能。因此，可以...
"domtoimage使用HTML5canvas从DOM节点生成图像" 这个标题提到了一个名为 "domtoimage" 的工具，它利用HTML5的Canvas API将DOM（文档对象模型）中的节点转换为图像。这个过程通常用于网页截图或者在网页中保存和分享...
在本章中，我们将深入探讨DOM（文档对象模型）节点操作的下半部分。DOM是HTML和XML文档的编程接口，允许我们通过JavaScript等脚本语言动态地修改、添加或删除网页内容。DOM节点操作是前端开发中的核心技能，对创建...
Chrome浏览器作为一款广泛使用的Web浏览器，提供了强大的开发者工具来帮助开发者进行网页调试和优化，其中包括查找并分析DOM节点上的事件监听器。本教程将围绕“如何在Chrome中根据DOM找到DOM上的事件”这一主题展开...
07.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...
vdom-to-html, 将虚拟DOM节点转换为 HTML vdom-to-html 将虚拟dom节点转换为 HTML安装npm install --save vdom-to-html用法var VNode = require('virtual-dom
JavaScript获取HTML DOM节点元素的方法是Web开发中的基础技能，尤其是在动态更新页面内容时。本文将对几种常见的DOM操作方法进行详细解释。 首先，我们可以通过顶层的`document`对象来获取元素： 1. `document....
动态添加DOM节点和事件是JavaScript中常用的操作，它允许我们在页面加载后通过脚本代码动态地添加或修改页面上的元素，以及为这些元素绑定事件处理器。本文将详细介绍在JavaScript中实现这一功能的方法，涵盖创建DOM...
onload 函数是指 DOM 中的 onload 事件处理函数，它是在文档加载完成后执行的函数。onload 函数提供了许多方法和属性，开发者可以通过这些方法和属性来操作文档的内容和结构。 查找节点 查找节点是指通过 ...
5. 操作节点：找到目标节点后，可以进行各种操作，如修改属性值、添加子节点、删除节点等。例如，要修改属性值： ```csharp XmlAttribute attr = targetElement.Attributes["attributeName"]; attr.Value = ...
JavaScript是一种基于对象和事件驱动的脚本语言，其在Web开发中扮演着核心角色，特别是在处理DOM（文档对象模型）时。DOM是一个跨平台和语言独立的接口，允许程序和脚本动态地访问和更新文档的内容、结构和样式。在...
在这个练习中，我们将主要关注如何使用原生JavaScript的数组方法来高效地处理DOM节点。 首先，让我们来看看DOM的基本概念。DOM将网页结构转化为一棵树形结构，每个HTML元素都是树上的一个节点。通过JavaScript，...
在本教程中，我们将深入探讨如何使用DOM4J解析（读取）XML节点数据，不受XML层级的限制。 首先，确保你已经下载了必要的依赖，即DOM4J库。通常，这将是一个名为`dom4j-x.x.x.jar`的文件，其中x.x.x是DOM4J的版本号...
dom4j解析节点名称和值,放入一个string类型的xml字符串输出标签对应的名称以及值的map
在JavaScript中，DOM0级事件处理程序是一种早期的事件处理方式，它是在DOM（文档对象模型）规范尚未完全定义事件处理机制时广泛使用的。在DOM0级事件中，事件处理程序的绑定和解绑是通过直接将函数赋值给元素的特定...