`

对event的cancelBubble属性理解

阅读更多
   由于HTML中的对象都是层次结构,比如一个Table包含了多个TR,一个TR包含了多个TD.
   Bubble就是一个事件可以从子节点向父节点传递,比如鼠标点击了一个TD,当前的event.srcElement就是这个TD,但是这种冒泡机制使你可以从TR或者Table处截获这个点击事件,但是如果你event.cancelBubble,则就不能上传事件。
例子:
<html> 
	<head> 
		<title>event.cancelBubble</title>
		<body> 
			<span onclick=alert("你好")>点我 <span>再点我</span></span>
			<br>
			<br> 
			<span onclick=alert("你好")>点我 <span onclick=event.cancelBubble=true;>再点我</span></span> 
		</body> 
</html> 
分享到:
评论

相关推荐

    关于event.cancelBubble和event.stopPropagation()的区别介绍

    `event.cancelBubble` 是 Internet Explorer 特有的属性,当设置为 `true` 时,它会阻止事件继续向上冒泡到父元素。然而,这个方法在非 IE 浏览器中并不被支持。在给出的例子中,`event.cancelBubble = true;` 在 ...

    javascript中的altKey 和 Event属性大全

    2. cancelBubble属性用于检测事件是否可以向上冒泡到父元素。它是一个可读写的布尔值,设置为true表示阻止事件继续向上冒泡,即不触发父元素的同类型事件处理器;设置为false(默认值)则允许事件冒泡。 3. clientX...

    Event对象详解

    以下是对Event对象及其重要属性的详细解释: 1. **altKey**:这个属性用于检查用户是否按下了Alt键。如果Alt键被按下,altKey的值为TRUE,否则为FALSE。它是只读的,因此不能被修改。 2. **button**:此属性用于...

    Event 对象的使用方法

    对于Internet Explorer浏览器,还有一些特有的Event对象属性,如`cancelBubble`用于阻止事件冒泡到父元素,`fromElement`和`toElement`在`mouseover`和`mouseout`事件中追踪鼠标移动方向,以及`offsetX`和`offsetY`...

    javascript Event对象详解

    以下是对Event对象及其重要属性的详细解释: 1. **altKey**:这个属性用于检查用户是否按下了Alt键。如果按下,其值为TRUE,否则为FALSE。它在事件处理函数中可以用来判断用户是否同时按下了Alt键执行某个操作。 2...

    高手window.event对象详解

    - **定义**:`event.cancelBubble` 属性用于控制事件是否冒泡到父元素。 - **值**: - `true` 表示取消事件冒泡; - `false` 表示允许事件冒泡,默认值。 - **应用场景**:在处理嵌套元素的事件时,可以通过...

    js-event事件

    ### JavaScript Event 事件详解 ...综上所述,理解`Event`对象及其属性和方法对于开发动态交互式的Web应用至关重要。通过灵活运用这些知识,可以有效地处理用户输入,并创建更加丰富和互动的用户体验。

    javascript event 用法

    JavaScript中的事件(Event)是网页交互的核心机制,它允许用户与...理解和熟练使用这些事件属性和方法对于创建交互式的网页应用至关重要。在实际开发中,还需要根据不同的浏览器兼容性需求选择合适的事件处理方式。

    event事件的使用及说明

    【事件(event)】在Web开发中,事件是用户与网页交互的关键部分,它允许JavaScript响应用户的操作,如点击按钮...理解并熟练运用Event对象及其属性、事件句柄以及事件处理模型,是成为一名合格的前端开发者必备的技能。

    javascript Event对象详解及使用示例

    理解并熟练运用Event对象的属性和方法,能够帮助开发者更好地控制网页的交互行为。 1. `altKey`属性:这个属性用于检查用户是否在触发事件时按下了Alt键。如果按下,其值为`TRUE`,否则为`FALSE`,是只读属性。 2....

    JS事件Event元素(兼容IE,Firefox,Chorme)

    例如,标准的W3C DOM事件模型提供了诸如stopPropagation()和preventDefault()方法来阻止事件的进一步传播或默认行为,而旧版IE浏览器使用自己的方法,比如cancelBubble属性和window.event的 returnValue属性。...

    javascript event 事件解析

    通过理解event对象及其属性,开发者可以更加灵活地控制网页中事件的响应方式,提升用户交互体验。需要注意的是,event对象的属性和用法可能会因不同的浏览器而有所差异,因此在跨浏览器开发时需要特别注意兼容性问题...

    如何禁用一些快捷键?怎么禁用快捷键?

    这里使用了`cancelBubble`和`returnValue`属性来取消事件的默认行为。 2. **监听键盘事件**:使用`onkeydown`事件监听器来捕获键盘按下事件。通过`keyCode`属性检查按下的是哪个键,并根据条件判断是否阻止该键的...

    IE事件对象(The Internet Explorer Event Object)

    最后,`cancelBubble`属性仅阻止事件冒泡,不支持捕获阶段的阻止,而DOM中的`stopPropagation()`方法则同时阻止捕获和冒泡。在IE8及更早版本中,由于不支持事件捕获阶段,`cancelBubble`就显得尤为重要。 总结起来...

    Javascript Event(事件)的传播与冒泡

    - **cancelBubble属性**:这个属性在IE8中使用,通过将`event.cancelBubble`设置为`true`,可以在冒泡阶段阻止事件继续向上冒泡。需要注意的是,IE9+不再支持这个属性,而是使用`stopPropagation()`。 ### 阻止默认...

    Js event事件在IE、FF兼容性问题

    首先,我们来看`window.event`这个属性。在IE浏览器中,`window.event` 是一个全局变量,可以用来访问当前发生的事件对象。例如,如果你在鼠标移动到按钮上时想要获取鼠标的坐标,你可以这样做: ```javascript ();...

    09JavaScript事件总结.docx

    这在很多情况下是有益的,但有时也需要阻止冒泡,如使用`event.cancelBubble = true`来实现。 五、事件委托(Delegation) 事件委托是一种优化技术,通过在共同的父元素上绑定事件监听器,而不是在每个子元素上单独...

    js event事件的传递与冒泡处理

    如果要阻止事件继续向上冒泡,可以使用`event.cancelBubble = true;`(IE)或`event.stopPropagation();`(DOM)。这样做可以确保事件只在当前元素上处理,不会影响到父元素的事件处理。 总的来说,JavaScript事件...

    javascript事件模型

    此外,还有一些浏览器特有的属性,如IE的`srcElement`(与DOM的`event.target`类似)、`fromElement`和`toElement`(表示鼠标移出和移入的元素),以及`cancelBubble`(用于阻止事件冒泡,等同于`stopPropagation()`...

Global site tag (gtag.js) - Google Analytics