`
rockyuse
  • 浏览: 195433 次
  • 性别: Icon_minigender_1
  • 来自: 成都
社区版块
存档分类
最新评论

preventDefault stopPropagation cancelBubble的解释

 
阅读更多

preventDefaul  (阻止默认)

 

preventDefault方法的起什么作用呢?我们知道比如<a href="http://www.baidu.com">百度</a>,这是html中最基础的东西,起的作用就是点击百度链接到http://www.baidu.com,这是属于<a>标签的默认行为,而preventDefault方法就是可以阻止它的默认行为的发生而发生其他的事情。

 

这种方法在非IE的浏览器可用, IE只能用return false来阻止了

document.getElementById("tj").onclick = function(e){
	if(e && e.preventDefault){
		e.preventDefault(); //非IE
	}else{
		window.event.returnValue = false; 
		return false; 
	}
}
 

 

 

stopPropagation (停止传播)

 

cancelBubble  (取消冒泡)

 

事件代理用到了两个在JavaSciprt事件中常被忽略的特性:事件冒泡以及目标元素。当一个元素上的事件被触发的时候,比如说鼠标点击了一个按钮,同样的事件将会在那个元素的所有祖先元素中被触发。这一过程被称为事件冒泡;这个事件从原始元素开始一直冒泡到DOM树的最上层。对任何一个事件来说,其目标元素都是原始元素,在我们的这个例子中也就是按钮。目标元素它在我们的事件对象中以属性的形式出现。使用事件代理的话我们可以把事件处理器添加到一个元素上,等待事件从它的子级元素里冒泡上来,并且可以很方便地判断出这个事件是从哪个元素开始的。
     stopPropagation方法就是起到阻止js事件冒泡的作用

 

 

var e=(evt) ? evt : window.event;
if (window.event) {
   e.cancelBubble=true;     // IE下阻止冒泡
} else {
   e.stopPropagation();     // 其它浏览器下阻止冒泡
}


分享到:
评论

相关推荐

    js(冒泡)中的preventDefault和stopPropagation.doc

    ### JavaScript中的`preventDefault`与`stopPropagation` #### 一、`preventDefault`详解 `preventDefault`方法在JavaScript中主要用于阻止元素的默认行为。在Web开发中,很多HTML元素都具有默认的行为,例如,`...

    js阻止冒泡及jquery阻止事件冒泡示例介绍.docx

    W3C标准的`event.stopPropagation()`被现代浏览器广泛支持,而IE浏览器则使用`event.cancelBubble = true;`。 ```javascript function stopPropagation(e) { var evt = e || window.event; if (evt....

    js阻止默认浏览器行为与冒泡行为的实现代码.docx

    总的来说,理解和正确使用`event.preventDefault()`和`event.stopPropagation()`是JavaScript事件处理中的关键技能,它们能够帮助开发者实现更灵活的交互和控制。在实际项目中,根据具体需求选择合适的方法,确保...

    javascript阻止事件冒泡和浏览器的默认行为

    总的来说,理解和有效地使用`event.stopPropagation()`和`event.preventDefault()`是JavaScript事件处理的关键部分,它们可以帮助开发者精确控制用户交互和页面行为。在编写交互式网页时,了解如何阻止事件冒泡和...

    阻止事件(取消浏览器对事件的默认行为并阻止其传播)

    根据需求,我们可以选择性地调用`preventDefault()`和`stopPropagation()`。以下是这三种情况的代码示例: 1. 只阻止事件的默认行为(不阻止传播): ```javascript function stopDefaultOnly(evt) { var evt = ...

    关于javaScript注册click大事传递参数的不胜利问题_.docx

    this.cancelBubble = true; } ``` 通过这样的方式,我们可以确保事件处理函数在任何浏览器中都能正确地接收和使用传递的参数。这种方法在处理复杂的业务逻辑,尤其是在涉及多个条件和权限判断的场景下,非常有用。...

    javascript 处理事件绑定的一些兼容写法

    它先尝试使用W3C标准的`preventDefault`和`stopPropagation`,然后回退到IE的旧方法: ```javascript var stopEvent = function(e){ e = e || window.event; if(e.preventDefault) { e.preventDefault(); e....

    event对象总结,更详细更全面

    * 应该使用preventDefault()方法来取消事件的默认行为 * 应该使用(cancelBubble)属性来取消事件冒泡 * 应该使用(pageX)和(pageY)属性来获取事件发生时鼠标相对于网页的X/Y坐标 事件对象是JavaScript编程中非常重要...

    JavaScript阻止事件冒泡示例分享

    总的来说,理解和熟练运用`event.stopPropagation()`、`event.cancelBubble`以及`event.preventDefault()`是编写健壮的JavaScript事件处理程序的关键。在编写代码时,应考虑各种浏览器的兼容性问题,以确保代码能在...

    javascript 拖动

    `event.preventDefault()` 和 `event.stopPropagation()` 是常用的两种方法。 3. **计算相对位置**:通过计算鼠标指针与元素左上角之间的距离来确定元素的新位置。 4. **兼容性处理**:由于不同浏览器对于事件处理...

    jQuery阻止事件冒泡实例分析

    事件冒泡可以通过多种方式阻止,包括直接在事件处理函数中返回false、使用event对象的stopPropagation方法以及在旧版IE浏览器中使用cancelBubble属性。 下面是对这些阻止事件冒泡方法的具体分析: 1. 使用return ...

    js停止冒泡和阻止浏览器默认行为的简单方法

    总的来说,理解并正确使用`stopPropagation()`、`preventDefault()`、`cancelBubble`和`returnValue`属性是JavaScript事件处理中的关键技巧。这些方法可以帮助开发者更精细地控制事件流,提高用户体验,同时避免因...

    jquery取消事件冒泡的三种方法(推荐)

    这是因为在旧版IE中,事件对象并没有`stopPropagation`这个方法,而是通过修改`cancelBubble`属性来实现相同的功能。 总结一下: - 事件冒泡是事件在DOM树中向上层元素传播的过程。 - `return false`可以同时阻止...

    浅谈javascript事件取消和阻止冒泡

    通过使用`event.preventDefault()`、`event.stopPropagation()`以及IE特有的方法,我们可以精细地管理事件的行为,确保它们按照我们的预期进行。在实际开发中,了解这些机制并熟练应用,可以帮助我们创建更健壮、更...

    浅谈js停止事件冒泡 阻止浏览器的默认行为(阻止超连接 #)

    理解和熟练使用`event.stopPropagation()`和`event.preventDefault()`是前端开发者必备的技能。它们可以帮助你精确控制事件的处理流程,避免不必要的副作用,同时提供更个性化的用户体验。在实际开发中,结合这两种...

    js阻止默认浏览器行为与冒泡行为的实现代码

    总的来说,通过`event.preventDefault()`和`event.stopPropagation()`,开发者可以更加精确地控制网页的交互行为,确保在不同浏览器下的一致性,同时提升用户体验。需要注意的是,使用这些方法时应谨慎,以免破坏...

    DOM 事件的深入浅出(二)

    需要特别注意的是,在IE8及以下版本中,stopPropagation方法是不被支持的,因此我们需要使用cancelBubble属性来达到同样的效果。 ```javascript function getEvent(event) { event = event || window.event; if ...

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

    通过选择下拉菜单`select`的选项,可以控制按钮点击时是调用`stopPropagation()`方法还是将`cancelBubble`设置为`true`,以示例展示如何控制事件传播。 总结来说,掌握JavaScript事件的传播与冒泡机制是前端开发者...

Global site tag (gtag.js) - Google Analytics