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

最新推荐文章于 2024-10-20 21:45:55 发布

Naga

最新推荐文章于 2024-10-20 21:45:55 发布

阅读量485

点赞数

分类专栏： JQuery/JS

JQuery/JS 专栏收录该内容

23 篇文章

订阅专栏

本文详细解析了JavaScript中的事件冒泡原理，并介绍了如何通过W3C方法和IE方式来阻止事件冒泡。此外，文章还讨论了如何在特定元素上阻止默认行为及其相关方法的应用。

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

一、什么是冒泡事件

<div id="div" οnclick="alert('div');">
	<ul οnclick="alert('ul');">
		<li οnclick="alert('li');">test</li>
	</ul>
</div>

上面的代码会依次触发alert(“li”),alert(“ul”),alert(“div”)，这就是事件冒泡。
二、阻止冒泡

w3c的方法是e.stopPropagation()，IE则是使用e.cancelBubble = true

故：window.event ? window.event.cancelBubble = true : e.stopPropagation();

三、什么元素有默认行为呢？
如链接<a>、提交按钮<input type=”submit”>等。
我们都知道，链接<a>的默认动作就是跳转到指定页面，下面就以它为例，阻止它的跳转：

//假定有链接<a href="http://caibaojian.com/" id="testA" >caibaojian.com</a>
var a = document.getElementById("testA");
a.onclick =function(e){
	if(e.preventDefault){
		e.preventDefault();
	}else{
		window.event.returnValue == false;
	}
}

四、return false

javascript的return false只会阻止默认行为，而是用jQuery的话则既阻止默认行为又防止对象冒泡。
下面这个使用原生JS，只会阻止默认行为，不会停止冒泡

<div id='div'  οnclick='alert("div");'>
	<ul  οnclick='alert("ul");'>
	<li id='ul-a' οnclick='alert("li");'><a href="http://caibaojian.com/"id="testB">caibaojian.com</a></li>
	</ul>
</div>
var a = document.getElementById("testB");
a.onclick = function(){
	return false;
};

下面这个是使用jQuery，既阻止默认行为又停止冒泡

<div id='div'  οnclick='alert("div");'>
	<ul  οnclick='alert("ul");'>
		<li id='ul-a' οnclick='alert("li");'><a href="http://caibaojian.com/"id="testC">caibaojian.com</a></li>
	</ul>
</div>
$("#testC").on('click',function(){
	return false;
});

五、总结使用方法

当需要停止冒泡行为时，可以使用

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

当需要阻止默认行为时，可以使用

/**
 * 阻止浏览器的默认行为
 * 
 * @param e
 */
function stopDefault(e) { 
    // 阻止默认浏览器动作(W3C)
    if ( e && e.preventDefault ) 
        e.preventDefault(); 
    // IE中阻止函数器默认动作的方式
    else 
        window.event.returnValue = false; 
    return false; 
}

注：本文摘自 http://caibaojian.com/javascript-stoppropagation-preventdefault.html