JavaScript阻止事件冒泡(兼容IE、Chrome、FF)

这里仅仅是一个简单代码demo,因为时间问题并未做深入研究,因为今天做项目时要用到阻止事件冒泡的内容,找了好多才找到一个可以使用的,特记录之。

<!DOCTYPE HTML>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>阻止事件冒泡</title>
	<script src="js/jquery-1.11.3.min.js"></script>
	<script src="js/jquery.cookie.js"></script>
	<style type="text/css">
	</style>
	<script type="text/javascript">
		function clickDiv(){
			alert("clickDiv");
		}
		function clickP(event){
			stopEvent(event);
			alert("clickP");
		}
		function stopEvent(event){ //阻止冒泡事件
		 //取消事件冒泡
		 var e=arguments.callee.caller.arguments[0]||event; //若省略此句,下面的e改为event,IE运行可以,但是其他浏览器就不兼容
		 if (e && e.stopPropagation) {
		  // this code is for Mozilla and Opera
		  e.stopPropagation();
		 } else if (window.event) {
		  // this code is for IE
			window.event.cancelBubble = true;
		 }
		}
	</script>
</head>
<body>
	<div onclick="clickDiv()" style="width:100px; height:100px; background-color:red;">
		<p onclick="clickP(event)" style="width:50px; height:50px; margin:auto; background-color:green;">
			abad
		</p>
	</div>
	<script type="text/javascript">
	</script>
</body>
</html>

  

时间: 2024-10-12 01:45:08

JavaScript阻止事件冒泡(兼容IE、Chrome、FF)的相关文章

JavaScript 阻止事件冒泡的实现方法

JavaScript 阻止事件冒泡,无使用其它插件来辅助,原生JS代码,考虑到浏览器的兼容性问题,这里对IE/火狐.Operating以及Chrome都有针对性的判断,代码如下: function cancelBubble(evt) { // 阻止事件冒泡 if (window.event) { // Chrome,IE6,Opera window.event.cancelBubble = true; } else { // FireFox 3 evt.stopPropagation(); }

前端学习代码实例-JavaScript阻止事件冒泡

任何现象都可能是双刃剑,有时候利用事件冒泡能够带来便利性,但是有时候也会带来不便. 下面通过带来实例介绍一下如何阻止事件冒泡. 代码实例如下: ] <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <title&g

javascript阻止事件冒泡及默认事件方式

//阻止事件冒泡 function stopBubble(e){ if(e&&e.stopPropagation){//非IE e.stopPropagation(); } else{//IE window.event.cancelBubble=true; } } //阻止默认事件 function stopDefault(e) { //阻止默认浏览器动作(W3C) if ( e && e.preventDefault ){ e.preventDefault(); }els

JavaScript阻止事件冒泡

有段时间没有更新博客了,2014就要过去了,贴上一段代码. 之前遇到事件冒泡的问题,也去网上搜索了一番,结果大部分都是一样的代码,贴来用时也不太顺利.涉及到FF时,可以用 e.stopPropagation(); ,不知怎地我没用成功.不过我发现FF支持e.cancelBubble = true;的写法,经测试可行.就把代码贴在这里吧,省得以后到处找.IE以前版本的兼容性还没测试,用到时再完善吧. //取消事件冒泡 function stopBubble(e) { var evt = (e) ?

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

/*---------------------------    功能:停止事件冒泡    ---------------------------*/    function stopBubble(e) {        //如果提供了事件对象,则这是一个非IE浏览器        if ( e && e.stopPropagation )            //因此它支持W3C的stopPropagation()方法            e.stopPropagation();  

JS如果阻止事件冒泡和浏览器默认事件

原地址:http://missra.com/article/web-57.html 嵌套的标签元素,如果父元素和子元素都绑定了一些事件,那么在点击最内层子元素时可能会触发父级元素的事件,下面介绍一下JavaScript阻止默认事件与JavaScript阻止事件冒泡示例. (1)阻止冒泡事件 注:嵌套元素一般都存在冒泡事件,会带来某些影响 最外层标签:outer,中间层标签:center,最内层标签:inner,并且在outer.center.inner都添加了alert弹框事件,在正常思维情况下

javascript里阻止事件冒泡

如下图所示,灰色块包含红色块,假设我们为灰色和红色块各绑定一个单击弹框事件,当我们点击红色块时,不希望触发灰色块的弹框事件,这就需要阻止冒泡事件了. IE里阻止冒泡事件使用cancelBubble属性,如果事件句柄想阻止事件传播到包容对象,必须把该属性设为 true. 火狐等非IE浏览器阻止冒泡事件使用stopPropagation()方法.调用该方法后,该节点上处理该事件的处理程序将被调用,事件不再被分派到其他节点. 我们看代码实例: <!doctype html> <html lan

javascript 停止事件冒泡以及阻止默认事件冒泡

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

js中阻止事件冒泡和浏览器默认行为

在使用javascript编程时会遇到一个问题,就是当你给html添加事件时,由于浏览器默认的为冒泡型事件触发机制,所以会触发你不想触发的事件.那么通过如下的函数可以解决这个问题.[兼容IE和FF] 1.阻止事件冒泡,使成为捕获型事件触发机制. function stopBubble(e) { //如果提供了事件对象,则这是一个非IE浏览器 if ( e && e.stopPropagation ) //因此它支持W3C的stopPropagation()方法 e.stopPropagat