`

事件冒泡的处理

阅读更多
事件冒泡,即事件开始由具体的元素接受,然后逐级向上传播。
简单点就是说给一个子元素一个onclick事件,当该元素被点击时,body也会被触发onclick事件。

2种处理方法,第一种:将事件定义为取消冒泡事件.第二种:将子元素的事件函数里返回false即可。

第一种:
even.bubbles 表明事件是否冒泡。
 even.cancelable 表明是否可以取消事件的默认行为。

<script type="text/javascript">
 document.getElementById("bt").onclick = function(){
     document.getElementById("box").style.display = "block";
 }
 
 document.getElementById("box").onclick = function(e){
     e = e || window.event;
     if(window.event){    //阻止事件冒泡
         e.cancelBubble = true;
     } else {
         e.stopPropagation();
     }
 }
 
 document.body.onclick = function(e){
     e = e || window.event;
      var target = e.target || e.srcElement;
     if(target.id === "box" || target.id === "bt") {
         return;
     } else {
         document.getElementById("box").style.display = "none";
     }
 }
 </script>


第二种:将该子元素的点击事件返回false即可。
 document.getElementById("bt").onclick = function(){
     document.getElementById("box").style.display = "block";
   return false;
 }
分享到:
评论

相关推荐

    阻止滚动条事件冒泡

    阻止事件冒泡可以避免一个事件被多次处理,提高性能,同时允许我们对特定元素的事件进行独立控制。 在JavaScript中,我们可以使用`event.stopPropagation()`方法来阻止事件冒泡。当我们在监听的事件处理函数中调用...

    事件冒泡解决方案

    在JavaScript的DOM编程中,事件冒泡是一个非常重要的概念,尤其在处理多级嵌套元素的事件时。事件冒泡是指事件开始时由最具体的元素(文档中嵌套层次最深的那个节点)接收,然后逐级向上转播至最不具体的节点(文档...

    javascript阻止事件冒泡的一种方法

    JavaScript中的事件冒泡是事件处理的一个重要概念,它是指事件开始时由最具体的元素(文档中嵌套层次最深的那个节点)接收,然后逐级向上转播至最不具体的节点(文档)的过程。这个机制允许事件在事件流的每个阶段都...

    利用事件冒泡(Event Bubbling )获取鼠标下的元素属性

    在JavaScript编程中,事件处理是不可或缺的一部分,尤其是事件冒泡(Event Bubbling)机制,它是理解DOM(Document Object Model)事件处理的关键概念之一。事件冒泡是指事件开始时由最具体的元素(文档中嵌套层次...

    事件冒泡

    在JavaScript和许多其他基于DOM(文档对象模型)的编程语言中,"事件冒泡"是一个重要的概念,尤其在处理用户交互时。事件冒泡是指事件从最深的节点开始,然后逐级向上传播到其父节点的过程。这个过程就像气泡在水中...

    JS事件冒泡浏览器兼容

    总结一下,JavaScript事件冒泡是浏览器中处理用户交互的重要机制,但它在不同浏览器间存在兼容性问题。通过使用DOM2级事件接口和编写兼容性代码,可以有效地管理这些差异,确保在各种浏览器环境下都能正确处理事件。...

    JavaScript和JQuery的鼠标mouse事件冒泡处理

    在探讨JavaScript和JQuery处理鼠标事件时,我们不可避免地要谈到事件冒泡的概念。事件冒泡是事件传播的一种方式,指的是在一个元素上发生的事件会沿着DOM树向上冒泡,直到根节点。在实际开发中,这一特性既带来了...

    事件冒泡及捕获

    事件冒泡和事件捕获是两种不同的事件处理机制,它们决定了事件如何在DOM(Document Object Model)层次结构中传播。了解这两者对于优化事件处理性能和编写高效代码至关重要。 事件冒泡是从最具体的节点(通常是DOM...

    JavaScript事件冒泡示例.html

    事件冒泡源于浏览器处理事件的方式,当一个事件(如点击、鼠标移动等)在一个元素上触发时,该事件会自底向上沿着DOM树(文档对象模型)逐级传播,直到到达根节点。这个过程就是事件冒泡。 事件冒泡的核心在于,...

    冒泡事件的处理方法

    冒泡事件的处理,做网页的时候经常会出现冒泡事件,这是一个简单的冒泡事件处理方法

    Android-传统事件捕获和冒泡的流程解析

    这个过程可以分为两个阶段:事件捕获(Capture)和事件冒泡(Bubble)。 1. **事件捕获阶段**: - **事件传递开始**:事件首先由最顶级的ViewGroup接收到,通常是DecorView。 - **向上传递**:事件按照从底部到...

    jquery阻止事件冒泡

    jQuery库提供了方便的方式来处理DOM事件,包括阻止事件冒泡的功能。这个功能在构建交互式网页时非常有用,可以避免不必要的事件处理或者防止多次执行相同的操作。 jQuery中的`event.stopPropagation()`方法是阻止...

    事件冒泡排序VI

    1. **创建VI**:首先,新建一个VI,命名为"事件冒泡排序.vi"。在前面板上,添加一个数组控件用于输入待排序的数据,再添加一个数组指示器用于显示排序后的结果。 2. **设计程序框图**:在程序框图中,首先创建一个...

    jQuery 1.9.1源码分析系列(十)事件系统之主动触发事件和模拟冒泡处理

    在本篇文章中,我们将深入探讨事件系统中的主动触发事件和模拟冒泡处理。首先,让我们来看一下`stopPropagation`函数。 `stopPropagation`的作用是阻止事件在DOM树中的冒泡过程,即防止事件向上传播到父元素。在...

    JS中绑定事件顺序(事件冒泡与事件捕获区别)

    JavaScript中的事件处理机制是网页交互的核心,其中包括了两种主要的事件传播模式:事件冒泡(Bubbling)和事件捕获(Cropping)。事件冒泡是指事件从最深的节点开始,然后逐级向上传播到最外层的节点。而事件捕获则...

    【JavaScript源代码】JavaScript中事件冒泡机制示例详析.docx

    JavaScript中的事件冒泡机制是DOM事件处理的核心概念之一,它涉及到事件在DOM树中的传播方式。事件流主要有三种阶段:事件捕获阶段、处于目标阶段和事件冒泡阶段。 事件捕获阶段是从DOM树的根节点开始,沿着树向下...

    详解javascript事件冒泡

    事件冒泡机制使得开发者可以在父元素上统一管理事件处理,而不需要为每个子元素单独设置事件监听,这样可以大大简化事件处理的代码结构。 事件冒泡可以分为两个阶段:事件捕获和事件冒泡。在W3C标准中,首先发生的...

    JavaScript 事件冒泡简介及应用

    JavaScript 事件冒泡是Web开发中的一个重要概念,它涉及到用户与网页交互时事件的处理方式。事件冒泡是指在一个对象上触发的事件会按照从内到外的顺序依次经过其所有父级元素,直到到达文档的根节点(通常是document...

    【JavaScript源代码】javascript事件冒泡,事件捕获和事件委托详解.docx

    JavaScript中的事件处理是Web开发中的核心概念,主要涉及事件冒泡、事件捕获以及事件委托。这三种机制在处理用户交互和DOM元素之间的事件时起着至关重要的作用。 1. **事件冒泡**:事件冒泡是事件处理的默认模式,...

Global site tag (gtag.js) - Google Analytics