`

阻止js bubble事件

    博客分类:
  • js
js 
阅读更多
当父div与子div同时具有不同click事件时,为了防止dom冒泡,防止点击子div时触发两个事件,则需要在子div的click事件中阻止bubble事件的发生。
代码如下。

function cancelBubble(e){
	if (e && e.stopPropagation) {
		
		// 非IE的情况
		e.stopPropagation()
	} else {
		
		// IE的情况
		window.event.cancelBubble=true
	}
        
}
分享到:
评论

相关推荐

    JS事件冒泡浏览器兼容

    在JavaScript中,有多种事件模型,包括事件冒泡(Bubble Phase)和捕获阶段(Capture Phase)。事件冒泡是最常见的一种,它始于事件目标元素(例如,用户点击的按钮),然后依次经过其所有父元素,直到到达文档的根...

    09JavaScript事件总结.docx

    四、事件冒泡(Bubble) 事件冒泡是指事件从最内层元素向上层元素传播,使得祖先元素也能接收到相同的事件。这在很多情况下是有益的,但有时也需要阻止冒泡,如使用`event.cancelBubble = true`来实现。 五、事件...

    深入理解事件冒泡(Bubble)和事件捕捉(capture)

    事件冒泡(Bubble)和事件捕捉(Capture)是事件处理的两种不同机制,它们定义了事件如何从DOM树的深层元素传播到顶层元素。深入理解这两者有助于优化事件处理的性能和功能。 首先,事件的发生顺序是一个关键概念。...

    前端项目-eve.js.zip

    4. **事件传播与阻止**:类似于DOM事件,`eve.js` 也支持事件传播(`bubble`)和阻止传播(`stop`),便于控制事件流。 5. **事件参数**:可以传递任意数量的参数给事件处理函数,增加事件的灵活性。 6. **事件上...

    事件高级用法及兼容写法

    element.addEventListener(事件名, 事件函数, isBubble); ``` 其中,`isBubble` 参数用于指定事件的传播方式,默认为 `false`(冒泡模式),设置为 `true` 时为捕获模式。需要注意的是,事件名无需带有 `on` ...

    js 冒泡事件与事件监听使用分析

    冒泡事件(Bubble Event)是JavaScript事件模型的一个关键特性。当一个事件(如点击或鼠标移动)在DOM(文档对象模型)树中的一个元素上发生时,这个事件会从最底层的元素开始向上逐级传播到它的父元素,直到到达DOM...

    JavaScriptDOMEvents_Examples.zip

    6. **事件阻止**:有时我们希望阻止事件的默认行为,如阻止链接跳转或表单提交,可以使用`event.preventDefault()`。若想停止事件在DOM中的传播,可以使用`event.stopPropagation()`。 7. **事件委托**:事件委托是...

    浅谈JavaScript的事件

    JavaScript的事件机制是Web开发...总结,理解JavaScript的事件流、事件冒泡以及如何阻止这些行为对于编写交互丰富的网页至关重要。通过正确使用这些技术,开发者可以精确控制用户与网页的交互,提供更优质的用户体验。

    JavaScript判断按钮被点击的方法

    在实际开发中,为了代码的维护性和可读性,通常会使用JavaScript库或框架来管理事件,比如jQuery或者现代前端框架(如React、Vue.js等)提供的事件绑定机制。这样可以更方便地添加和管理多个事件监听器,同时它们...

    javascript event 用法

    JavaScript事件处理包括事件监听(addEventListener)、事件冒泡(bubble)、事件捕获(capture)等概念,同时还有事件委托、事件分离等高级技术。理解和熟练使用这些事件属性和方法对于创建交互式的网页应用至关...

    javascript相关事件的几个概念

    在事件处理程序中,这个对象通常作为参数传递,可以访问其中的信息,例如`event.preventDefault()`阻止默认行为,`event.stopPropagation()`阻止事件冒泡。 5. **事件传播(event propagation)**:事件传播是...

    Bubble_Popper

    "Bubble_Popper" 是一个基于JavaScript的项目,很可能是一个游戏或者互动应用,其核心功能可能是消除气泡或者解决类似泡泡爆破的挑战。在JavaScript的世界里,这样的项目通常涉及到DOM操作、事件处理、动画效果以及...

    Firefox不支持click方法的解决

    eventTypeArg 指定事件类型,canBubbleArg 指定该事件是否可以 bubble,cancelableArg 指定是否可以阻止事件的默认操作。 Firefox 不支持 click 方法是因为浏览器的实现问题,而不是因为 JavaScript 的问题。解决...

    Jquery中文Api

    - **事件冒泡与阻止(Bubble and Prevent)**: `.stopPropagation()`用于阻止事件冒泡,`.preventDefault()`阻止默认行为。 ### 3. 动画效果(Animations) jQuery的`.animate()`函数可以创建自定义动画效果,如`$...

    js中点击空白区域时文本框与隐藏层的显示与影藏问题

    3. 阻止事件冒泡:`control_bubble`函数使用了`cancelBubble`属性和`stopPropagation`方法来阻止事件在DOM树中向上冒泡。这在处理复杂的交互时非常有用,可以避免不必要的事件处理。 4. CSS样式的动态设置:通过...

    events-app

    3. **事件冒泡(Event Bubble)**:在DOM树中,事件会从最深的节点向上逐级传播到父节点,这个过程称为事件冒泡。了解这一机制对于决定何时以及在哪里处理事件至关重要。 4. **事件捕获(Event Capture)**:与事件...

    html5默认气泡修改的代码详解

    接着,在JavaScript中,我们需要监听表单的`invalid`和`submit`事件。通过`addEventListener`,我们可以阻止浏览器的默认气泡显示,并在表单验证失败时显示我们自定义的错误信息。例如: ```javascript function ...

    primefaces_users_guide_3_3.pdf

    - **PrimeFaces**:这是一个基于JavaServer Faces(JSF)的开源JavaScript库,提供了一系列丰富的用户界面组件,旨在简化Web应用开发并提升用户体验。 - **PrimeTeknoloji**:PrimeFaces由PrimeTeknoloji公司开发和...

Global site tag (gtag.js) - Google Analytics