js函数中 如何阻止事件冒泡
何为冒泡事件。
就是当设定了多个div的嵌套时;即建立了父子关系,当父div与子div共同加入了onclick事件时,当触发了子div的onclick事件后,子div进行相应的js操作。但是父div的onclick事件同样会被触发。这就造成了事件的多层并发,导致了页面混乱。这就是冒泡事件。
消除冒泡事件的方法
阻止JavaScript事件冒泡传递(cancelBubble 、stopPropagation)
html中 [input id="text1" type="text" onclick="F_Bind_ZhongLeiClick(this)" /]
script中 该怎样阻止事件冒泡啊
function F_Bind_ZhongLeiClick(ele) {
//jquery代码
//
}
不想使用这种绑定方法
$("#text1").bind("click",function(e){
});
// 第一种
// html 加return false
//[input id="text1" type="text" onclick="F_Bind_ZhongLeiClick(this);return false;" /]
// 第二种,结合html和js一起
// 函数调用前加return,这样函数里可以控制要不要阻止
// [input id="text1" type="text" onclick="return F_Bind_ZhongLeiClick(this);" /]
// js中return false是阻止,return true是不阻止
function F_Bind_ZhongLeiClick(ele) {
return false;
}
首先:你不想使用的方法恰恰是推荐的最好的方法,为什么不用推荐的方法呢。
如果实在想用第一种,
onclick="F_Bind_ZhongLeiClick(this);return false;"
==========================================================
http://tieba.baidu.com/f?kz=877165769
原文出处:http://www.fydir.com/Home/article/399/1.aspx?RouteExistingFiles=False&Count=23
下面的一段代码即可以很好的解释是么是冒泡效果,什么叫消除冒泡效果
[html]
[head]
[title]
阻止JavaScript事件冒泡传递(cancelBubble 、stopPropagation)
[itle]
[meta name="keywords" content="JavaScript,事件冒泡,cancelBubble,stopPropagation" /]
[script type="text/javascript"]
function doSomething (obj,evt) {
alert(obj.id);
var e=(evt)?evt:window.event; //判断浏览器的类型,在基于ie内核的浏览器中的使用cancelBubble
if (window.event) {
e.cancelBubble=true;
} else {
//e.preventDefault(); //在基于firefox内核的浏览器中支持做法stopPropagation
e.stopPropagation();
} }
[/script]
[/head]
[body]
[div id="parent1" onclick="alert(this.id)" style="width:250px;background-color:yellow"]
[p]This is parent1 div.[/p]
[div id="child1" onclick="alert(this.id)" style="width:200px;background-color:orange"]
[p]This is child1.[/p]
[/div]
[p]This is parent1 div.[/p]
[/div]
[br /]
[div id="parent2" onclick="alert(this.id)" style="width:250px;background-color:cyan;"]
[p]This is parent2 div.[/p]
[div id="child2" onclick="doSomething(this,event);" style="width:200px;background-color:lightblue;"]
[p]This is child2. Will bubble.[/p]
[/div]
[p]This is parent2 div.[/p]
[/div]
[/body]
[/html]
把代码直接复制后,打开当点击child1时不仅会弹出 child1 对话框还会弹出 parent1
这就是冒泡事件
但是单击chile2只会弹出child2却不会弹出 parent2,这便是应用了阻止冒泡事件的特效的效果.
详细:请访问www.fydir.com 发源地分享你的智慧
==========================================================
[!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"]
[html]
[head]
[meta http-equiv="Content-Type" content="text/html; charset=UTF-8"]
[title]js阻止事件冒泡的DEMO[/title]
[script type="text/javascript"]
//阻止冒泡的方法
function stopPP(e)
{
var evt = e || window.event;
//IE用cancelBubble=true来阻止而FF下需要用stopPropagation方法
evt.stopPropagation ? evt.stopPropagation() : (evt.cancelBubble=true);
}
[/script]
[/head]
[body]
[div style="margin: 150px 400px;width: 700px; height: 550px; background-color: #878788;" onclick="alert('最外层div上的onclick事件');"]
[h2]最外层div上的onclick事件[/h2]
[div style="margin: 100px; width: 500px; height: 300px; background-color: #545444;" onclick="stopPP(arguments[0]);alert('中间层div上的onclick事件');"]
[h3]中间层div上的onclick事件[/h3]
[div style="margin: 60px 100px; height: 100px; width: 300px; background-color: red;" onclick="stopPP(arguments[0]);alert('最内层div上的onclick事件');"]
[h4]最内层div上的onclick事件”[/h4]
[/div]
[/div]
[/div]
[/body]
[/html]
==========================================================
[!doctype html]
[html]
[head]
[meta charset="gb2312"]
[title]无标题文档[/title]
[/head]
[body]
[div id="c1" onclick="alert(1)"]
[div id="c2" onlick="alert(2)"]
[input type="button" id="c3" value="点击" xonclick="alert(3)" onClick="runc3();return false;"]
[/div]
[/div]
[script type="text/javascript"]
function runc3(){
alert('f3');
}
document.getElementById('c3').addEventListener('click',function(e){e.stopPropagation()},false);
[/script]