JavaScript停止冒泡和阻止浏览器默认行为

最新推荐文章于 2025-07-04 16:59:10 发布

原创最新推荐文章于 2025-07-04 16:59:10 发布 · 1.4k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #jquery

js 专栏收录该内容

1 篇文章

订阅专栏

本文介绍如何在JavaScript中阻止事件冒泡及浏览器默认行为，包括原生JS与jQuery的实现方法。通过实例展示了不同阻止方式的效果差异，并提供场景应用示例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

* JavaScript停止冒泡和阻止浏览器默认行为 *

JQuery 提供了两种方式来阻止事件冒泡，Jquery阻止默认动作即通知浏览器不要执行与事件关联的默认动作，下文有个不错的示例，需要的朋友可以参考下

1.js阻止冒泡 
  在阻止冒泡的过程中，W3C和IE采用的不同的方法，那么我们必须做以下兼容。

//推荐使用本方法
function stopPro(evt){ 
var e = evt || window.event; 
//returnValue如果设置了该属性，它的值比事件句柄的返回值优先级高。把这个属性设置为 fasle， 
//可以取消发生事件的源元素的默认动作。 
//window.event?e.returnValue = false:e.preventDefault(); 
window.event?e.cancelBubble=true:e.stopPropagation(); 
}

或者


function cancelBubble(e) { 
    var evt = e ? e : window.event; 
    if (evt.stopPropagation) { 
    //W3C 
    evt.stopPropagation(); 
    } 
    else { 
    //IE 
    evt.cancelBubble = true; 
    }
}

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

    方式一：event.stopPropagation();

$("#div1").mousedown(function(event){ 
    event.stopPropagation(); 
});

    方式二：return false;

$("#div1").mousedown(function(event){ 
    return false; 
});

Jquery阻止默认动作即通知浏览器不要执行与事件关联的默认动作。

$("a").click(function(event){ 
    event.preventDefault(); //阻止默认动作即该链接不会跳转。 
    alert(4);//但是这个还会弹出 
    event.stopPropagation();//阻止冒泡事件，上级的单击事件不会被调用 
    return false;//不仅阻止了事件往上冒泡，而且阻止了事件本身 
});

但是这两种方式是有区别的。return false 不仅阻止了事件往上冒泡，而且阻止了事件本身。event.stopPropagation() 则只阻止事件往上冒泡，不阻止事件本身。 
场景应用：Google 和 百度的联想框，当弹出下拉列表，用户在下拉列表区域按下鼠标时需要让光标仍然保持在文本输入框。

案例

Jquery案例：


<script src="js/jquery-1.4.3.js"></script> 
<script type="text/javascript"> 

$(function(){ 
    $("#aa").click(function(event){ 
        alert("aa"); 
        event.preventDefault(); 
        event.stopPropagation(); 
        alert(3); 
    }); 

    $("#ee").click(function(){ 
        alert("ee"); 
    }); 

    $("a").click(function(event){ 
        event.preventDefault(); 
        alert(4); 
        event.stopPropagation(); 
        return false; 
    }); 
}); 
</script> 
</head> 
<body> 
<div id="ee"> 
    aaaaaaa 
<input id="aa" type="button" value="test" /> 
<a href="http://baidu.com">baidu.com</a> 
</div> 
</body>

js案例

function tt(){ 
    alert("div"); 
} 
function ttt(){ 
    var e = arguments.callee.caller.arguments[0] || window.event; 
    window.event?e.returnValue = false:e.preventDefault(); 
    alert(3); 
    window.event?e.cancelBubble:e.stopPropagation(); 
    alert(4); 
} 
</script> 
</head> 
<body> 
<div onclick = "tt();"> 
    ccccc 
<a href="http://baidu.com" onclick="ttt();">baidu.com</a> 
</div>