`
hiuman
  • 浏览: 52271 次
  • 性别: Icon_minigender_2
  • 来自: 广州
社区版块
存档分类
最新评论

阻止事件冒泡

阅读更多
JavaScript停止冒泡和阻止浏览器默认行为

事件兼容

function myfn(e){
    var evt = e ? e:window.event;
}


js停止冒泡
function myfn(e){
    window.event? window.event.cancelBubble = true : e.stopPropagation();
}


js阻止默认行为
function myfn(e){
    window.event? window.event.returnValue = false : e.preventDefault();
}


js阻止冒泡:
w3c的方法是e.stopPropagation(),IE则是使用e.cancelBubble = true。

stopPropagation也是事件对象(Event)的一个方法,作用是阻止目标元素的冒泡事件,但是会不阻止默认行为。

js阻止默认行为:
w3c的方法是e.preventDefault(),IE则是使用e.returnValue = false;

preventDefault它是事件对象(Event)的一个方法,作用是取消一个目标元素的默认行为。
既然是说默认行为,当然是元素必须有默认行为才能被取消,如果元素本身就没有默认行为,调用当然就无效了。

什么元素有默认行为呢?如链接<a>,提交按钮<input type=”submit”>等。
当Event 对象的 cancelable为false时,表示没有默认行为,这时即使有默认行为,调用preventDefault也是不会起作用的。

return false:
javascript的return false只会阻止默认行为,而是用jQuery的话则既阻止默认行为又防止对象冒泡。

总结使用方法:
当需要停止冒泡行为时,可以使用

function stopBubble(e) { 
//如果提供了事件对象,则这是一个非IE浏览器 
if ( e && e.stopPropagation ) 
    //因此它支持W3C的stopPropagation()方法 
    e.stopPropagation(); 
else 
    //否则,我们需要使用IE的方式来取消事件冒泡 
    window.event.cancelBubble = true; 
}


当需要阻止默认行为时,可以使用:
//阻止浏览器的默认行为 
function stopDefault( e ) { 
    //阻止默认浏览器动作(W3C) 
    if ( e && e.preventDefault ) 
        e.preventDefault(); 
    //IE中阻止函数器默认动作的方式 
    else 
        window.event.returnValue = false; 
    return false; 
}


事件注意点:

event代表事件的状态,例如触发event对象的元素、鼠标的位置及状态、按下的键等等;
event对象只在事件发生的过程中才有效。

firefox里的event跟IE里的不同,IE里的是全局变量,随时可用;
firefox里的要用参数引导才能用,是运行时的临时变量。
在IE/Opera中是window.event,在Firefox中是event;

而事件的对象,在IE中是window.event.srcElement,
在Firefox中是event.target,Opera中两者都可用。

下面两句效果相同:

//code from http://caibaojian.com/javascript-stoppropagation-preventdefault.html
function a(e){
var e = (e) ? e : ((window.event) ? window.event : null); 
var e = e || window.event; // firefox下window.event为null, IE下event为null
}




原文地址:

http://caibaojian.com/javascript-stoppropagation-preventdefault.html
分享到:
评论

相关推荐

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

    然而,在某些情况下,我们可能希望阻止事件继续向上层元素传播,这就是所谓的“阻止事件冒泡”。 阻止事件冒泡的方法主要有两种:`event.stopPropagation()` 和 `event.stopImmediatePropagation()`。这两种方法在...

    阻止滚动条事件冒泡

    标题中的“阻止滚动条事件冒泡”指的是在用户滚动页面某个部分时,阻止这个滚动事件向上传递到其他元素或窗口,特别是阻止`mousewheel`事件的冒泡。`mousewheel`事件通常用于处理鼠标滚轮滚动的行为,它在用户滚动...

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

    // 不仅阻止冒泡,也阻止了事件本身 }); }); &lt;div id="ee"&gt;aaaaa &lt;a href="baidu.com"&gt;baidu.com&lt;/a&gt; ``` 在这个例子中,点击按钮时会触发多个事件处理函数,但通过使用`event.stopPropagation();`和`...

    jquery阻止事件冒泡

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

    JQuery 提供了两种方式来阻止事件冒泡.rar

    除了这两种阻止事件冒泡的方法,JQuery还提供了`event.preventDefault()`,这个方法并不阻止事件冒泡,而是阻止了事件的默认行为。例如,点击链接默认会跳转到新的URL,但如果在事件处理程序中调用了`event....

    JQuery中阻止事件冒泡几种方式及其区别介绍

    JQuery 提供了两种方式来阻止事件冒泡。 方式一:event.stopPropagation(); 代码如下: $(“#div1”).mousedown(function(event){ event.stopPropagation(); }); 方式二:return false; 代码如下: $(“#div1”)....

    在点击div中的p时,如何阻止事件冒泡

    1. `cancelBubble`函数内部首先判断浏览器是否支持`stopPropagation`方法,这是W3C标准中的事件阻止冒泡方法。对于不支持此方法的老版本IE浏览器,它会使用`cancelBubble = true`来达到相同的效果。 2. 在`show(info...

    事件冒泡是什么如何用jquery阻止事件冒泡

    2. 阻止事件冒泡的方法:在实际的开发中,我们经常需要阻止事件冒泡以防止事件被不相关的父级元素捕获。在jQuery中,可以通过几种方式来阻止事件冒泡。 - 使用返回false的方式:在事件处理函数中直接返回false,这...

    兼容各大浏览器的JavaScript阻止事件冒泡代码

    // 阻止冒泡事件 // 取消事件冒泡 var e = arguments.callee.caller.arguments[0] || event; // 若省略此句,下面的e改为event,IE运行可以,但是其他浏览器就不兼容 if(e && e.stopPropagation){ // Mozilla和...

    jQuery事件绑定和解绑、事件冒泡与阻止事件冒泡及弹出应用示例

    综上所述,jQuery事件处理机制中的绑定和解绑、事件冒泡与阻止事件冒泡是前端开发中非常重要的知识点。在实际开发过程中,灵活运用这些技术可以实现更加丰富的交互效果,并提升用户体验。通过上述实例的介绍和分析,...

    利用JQuery阻止事件冒泡

    除了使用event对象的方法外,JQuery的事件处理函数还提供了一个简写形式来阻止冒泡,即直接在事件处理函数的末尾返回false。这等同于调用了event.stopPropagation()和event.preventDefault()。例如: ```javascript...

    事件冒泡解决方案

    但这个方法通常不是用来阻止冒泡,而是为了提前处理事件。 3. **停止事件的默认行为**: 使用`event.preventDefault()`可以阻止事件的默认行为,但并不会阻止事件的冒泡。在本例中,这可能不是必要的,因为默认...

    解决VUE框架 导致绑定事件的阻止冒泡失效问题

    Vue框架中绑定事件的阻止冒泡失效问题解决方案 在Vue框架中,绑定事件的阻止冒泡失效问题是一个常见的问题。当我们使用Vue框架时,因为框架内部对DOM的处理,导致绑定事件的阻止冒泡失效。下面我们将探讨这个问题的...

    React中阻止事件冒泡的问题详析

    最近在研究react、redux等,网上找了很久都没有完整的答案,索性自己整理下,这篇文章就来给大家介绍了关于React阻止事件冒泡的相关内容,下面话不多说了,来一起看看详细的介绍吧 在正式开始前,先来看看 JS 中事件...

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

    标题中提到的“js阻止冒泡及jquery阻止事件冒泡示例介绍”涉及JavaScript和JQuery两种技术在事件处理中阻止事件冒泡的概念。冒泡是指当一个元素上触发了某个事件(如点击),这个事件不仅会在该元素上进行处理,还会...

    JS阻止事件冒泡的方法详解

    &lt;&#37;@ Page Language=C# AutoEventWireup=true CodeFile=Default5.aspx.csInherits=Default5%&gt; &lt;!DOCTYPE ...&lt;... &lt;head runat=server&gt;...Porschev--

    js阻止默认事件与js阻止事件冒泡示例分享 js阻止冒泡事件

    在处理事件时,有时我们需要阻止默认行为或者防止事件冒泡,以确保事件按照我们的预期执行。本篇将详细介绍`event.preventDefault()`和`event.stopPropagation()`的用法,并提供示例。 1. **阻止默认事件**: 当一...

    JS阻止事件冒泡行为和闭包的方法

    ### JS阻止事件冒泡行为 在Web开发中,事件冒泡是一种浏览器处理事件的机制。当我们点击页面上的某个元素时,事件不仅仅会在该元素上触发,还会传递到其父级元素,最后直至文档的根元素。在多数情况下,这种机制是...

Global site tag (gtag.js) - Google Analytics