js 阻止冒泡 在控件的 onxxx 事件中调用就可以阻止父控件也响应消息了
2012-02-08 16:43
567 查看
//阻止冒泡//在控件的 onxxx 事件中调用就可以阻止父控件也响应消息了
DOM.stopBubble = function(e)
{
//如果传入了事件对象.那么就是非IE浏览器
if (e && e.stopPropagation) {
//因此它支持W3C的stopPropation()方法
e.stopPropagation();
}
else {
//否则,我们得使用IE的方式来取消事件冒泡
window.event.cancelBubble = true;
}
}//
来自 Dom文档对象模型-2010版.chm
<html>
<head>
<title>阻止冒泡--康董</title>
<style>
body{
color:#333;
font-size:12px;
}
</style>
</head>
<body>
<p>什么是事件冒泡,通俗的来讲就是 我们为页面内body添加一个单击事件,同样再为页面内li元素添加一个单击事件..当你单击li的时候.<br>
body的事件也会被触发.....因为li被包含在body元素内...你单击了li同时也单击了body...这就是事件冒泡....<br />
在有些时候.我们要阻止这种情况发生...也就是单击li事件.不会触发body的事件.... 这就叫阻止冒泡!
<div id="a">
<ul id="lia">请单击下面的列表.会触发body事件
<li>项目1</li>
<li>项目2</li>
<li>项目3</li>
</ul>
<ul id="lib">请单下面的列表.不会触发body事件.
<li>项目1</li>
<li>项目2</li>
<li>项目3</li>
</ul>
</div>
<script language="javascript">
document.body.onclick = function(){ //首先为body元素绑定一个单击事件
alert("BODY事件"); //单击页面即弹出对话框
}
function att_Event(){ //为第一组li元素绑定onclick事件
var li = document.getElementById("lia").getElementsByTagName("li");
for(var i=0;i<li.length;i++){
li[i].onclick = function(){
alert("Li事件");
}
}
}
function att_Event_b(){ //为第二组li元素绑定onclick事件
var li = document.getElementById("lib").getElementsByTagName("li");
for(var i=0;i<li.length;i++){
li[i].onclick = function(e){
alert("Li事件");
stopBubble(e);
}
}
}
function stopBubble(e){
//如果传入了事件对象.那么就是非IE浏览器
if(e && e.stopPropagation){
//因此它支持W3C的stopPropation()方法
e.stopPropagation();
}
else{
//否则,我们得使用IE的方式来取消事件冒泡
window.event.cancelBubble = true;
}
}
window.onload = function(){
att_Event();
att_Event_b();
}
</script>
</body>
</html>
DOM.stopBubble = function(e)
{
//如果传入了事件对象.那么就是非IE浏览器
if (e && e.stopPropagation) {
//因此它支持W3C的stopPropation()方法
e.stopPropagation();
}
else {
//否则,我们得使用IE的方式来取消事件冒泡
window.event.cancelBubble = true;
}
}//
来自 Dom文档对象模型-2010版.chm
<html>
<head>
<title>阻止冒泡--康董</title>
<style>
body{
color:#333;
font-size:12px;
}
</style>
</head>
<body>
<p>什么是事件冒泡,通俗的来讲就是 我们为页面内body添加一个单击事件,同样再为页面内li元素添加一个单击事件..当你单击li的时候.<br>
body的事件也会被触发.....因为li被包含在body元素内...你单击了li同时也单击了body...这就是事件冒泡....<br />
在有些时候.我们要阻止这种情况发生...也就是单击li事件.不会触发body的事件.... 这就叫阻止冒泡!
<div id="a">
<ul id="lia">请单击下面的列表.会触发body事件
<li>项目1</li>
<li>项目2</li>
<li>项目3</li>
</ul>
<ul id="lib">请单下面的列表.不会触发body事件.
<li>项目1</li>
<li>项目2</li>
<li>项目3</li>
</ul>
</div>
<script language="javascript">
document.body.onclick = function(){ //首先为body元素绑定一个单击事件
alert("BODY事件"); //单击页面即弹出对话框
}
function att_Event(){ //为第一组li元素绑定onclick事件
var li = document.getElementById("lia").getElementsByTagName("li");
for(var i=0;i<li.length;i++){
li[i].onclick = function(){
alert("Li事件");
}
}
}
function att_Event_b(){ //为第二组li元素绑定onclick事件
var li = document.getElementById("lib").getElementsByTagName("li");
for(var i=0;i<li.length;i++){
li[i].onclick = function(e){
alert("Li事件");
stopBubble(e);
}
}
}
function stopBubble(e){
//如果传入了事件对象.那么就是非IE浏览器
if(e && e.stopPropagation){
//因此它支持W3C的stopPropation()方法
e.stopPropagation();
}
else{
//否则,我们得使用IE的方式来取消事件冒泡
window.event.cancelBubble = true;
}
}
window.onload = function(){
att_Event();
att_Event_b();
}
</script>
</body>
</html>
相关文章推荐
- JS实现OCX控件的事件响应示例
- js阻止浏览器的默认行为以及停止事件冒泡(用JQuery实现回车提交)
- js阻止冒泡事件
- js或jquery阻止向上冒泡事件
- js 停止事件冒泡 阻止浏览器的默认行为(阻止超连接 # )
- angularjs ng-click 阻止事件冒泡
- [JS]笔记12之事件机制--事件冒泡和捕获--事件监听--阻止事件传播
- js 停止事件冒泡 阻止浏览器的默认行为(阻止超连接 # )
- js阻止事件冒泡和标签默认行为
- 标签中事件在js中获取,阻止冒泡和默认事件。兼容ie
- zepto.js中tap事件阻止冒泡的实现方法
- js阻止时间冒泡事件——event.stopPropagation()
- JS阻止事件冒泡
- Js 冒泡事件阻止
- 服务器控件使用js进行验证(选择地调用后台事件)
- js 阻止子元素响应父元素的onmouseout事件具体实现
- Js&nbsp;冒泡事件阻止
- JS阻止事件冒泡兼容各浏览器
- js区分鼠标单双击 阻止事件冒泡