阻止事件冒泡详解

最新推荐文章于 2022-09-22 11:36:32 发布

简单快乐LSQ

最新推荐文章于 2022-09-22 11:36:32 发布

阅读量580

点赞数

分类专栏： JavaScript

本文链接：https://blog.csdn.net/lsq913027/article/details/9700553

版权

JavaScript 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

首先了解阻止事件冒泡的原理：

取消事件冒泡，在 IE 的事件机制中，触发事件会从子元素向父元素逐级上传，就是说，如果子元素触发了单击事件，那么也会触发父元素的单击事件；event.cancelBubble=true;可以停止事件继续上传

在Ie的事件传递是从下到上的：
事件来源对象->上级对象->上上级对象->.....->body->document->window
NS的事件传递是从上到下：
window->document->body->....->事件来源对象

（event.returnValue=false 设置事件的返回值为false,即取消事件处理）

所谓NS或者NS2（Network Simulator, version 2）是一种面向对象的网络仿真器，本质上是一个离散事件模拟器。由UC Berkeley开发而成。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<style>
<!-- 
position中几个属性的作用：
static : 　无特殊定位，对象遵循HTML定位规则 
absolute : 　将对象从文档流中拖出，使用left，right，top，bottom等属性进行绝对定位。而其层叠通过z-index属性定义。此时对象不具有边距，但仍有补白和边框 
relative : 　对象不可层叠，但将依据left，right，top，bottom等属性在正常文档流中偏移位置 
fixed : 　IE5.5及NS6尚不支持此属性 
-->
#btn{position:relative;}
div{position:absolute;top:40px;left:10px;width:200px;height:200px;display:none;background:#000;}
div a{color:#FFF;}
</style>
<script>
<!-- window.onload,当页面加载的时候调用，一般情况下调用匿名函数-->
window.οnlοad=function()
{
    var oBtn=document.getElementById('btn');
    var oDiv=document.getElementById('div');
    var oClose=document.getElementById('close');
    
    oBtn.οnmοuseοver=function()
    {
        oDiv.style.display='block';//当鼠标滑过的时候显示
    };
    
    oDiv.οnclick=function(ev)
    {
        var oEvent=ev||event;
        oDiv.style.display='block';
		
        oEvent.cancelBubble=true;
		
    };
    
    oClose.οnclick=function(ev)
    {
        var oEvent=ev||event;
        oDiv.style.display='none';
        oEvent.cancelBubble=true;
    };
    
    document.οnclick=function()
    {
        oDiv.style.display='none';
    };
};
</script>

</head>

<body>
<input id="btn" type="button" value="划过我就弹出" />
<div id="div">
    <a id="close" href="javascript:">关闭</a><br /><br />
    <input type="input" /><br />
    <input type="button" value="提交" />
</div>
</body>
</html>

简单快乐LSQ

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
阻止事件冒泡详解

首先了解阻止事件冒泡的原理：取消事件冒泡，在 IE 的事件机制中，触发事件会从子元素向父元素逐级上传，就是说，如果子元素触发了单击事件，那么也会触发父元素的单击事件；event.cancelBubble=true;可以停止事件继续上传在Ie的事件传递是从下到上的：事件来源对象->上级对象->上上级对象->.....->body->document->windowNS的事件传递是从
复制链接

扫一扫

专栏目录