理解阻止浏览器默认事件和事件冒泡cancelBubble
2024-10-11 01:43:25
一、阻止浏览器默认事件
1、先举个例子说什么是 浏览器的默认事件 :
比如有一个输入框,当我按下字母a,就会在输入框显示字母a。就是浏览器本该发生的事情。小孩子一出生就会汲取母乳一样的道理,这些都是先天,默认好的了。
2、看个demo,阻止浏览器默认的右键弹出菜单,而且弹出自己自定义的菜单。代码如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style type="text/css">
#div1
{
width:100px;
height: 100px;
list-style: none;
background: #ccc;
display: none; position: absolute;
}
</style>
<script type="text/javascript">
/*在鼠标按下位置弹出菜单*/
window.oncontextmenu = function(evt)
{
var oDiv = document.getElementById('div1'); var oEvt = evt || event; oDiv.style.display = 'block';
oDiv.style.left = oEvt.clientX +'px';
oDiv.style.top = oEvt.clientY +'px'; return false; //阻止浏览器默认事件 document.onclick=function () //当再点击时,设置div1为none
{
var oDiv=document.getElementById('div1');
oDiv.style.display='none';
};
}
</script>
</head>
<body>
<div id="div1">
<ul>
<li>菜单一</li>
<li>菜单一</li>
<li>菜单一</li>
<li>菜单一</li>
</ul>
</div>
</body>
</html>
return false,阻止了浏览器默认事件,所以当右击鼠标右键时,不会弹出默认菜单, 而是弹出了我自定义的菜单,一个ul列表。
兼容:IE8+,chrome、FF
二、阻止事件冒泡cancelBubble=true
1、举个例子说明什么是事件冒泡
<div id='div' onclick='alert("div");'>
<ul onclick='alert("ul");'>
<li onclick='alert("li");'>test</li>
</ul>
</div>
当我点击test的时候,先会弹出 li ->ul ->div。从下往上冒泡。就比如小鱼儿在海底冒泡,小泡泡从海底往海面冒泡,越来越大。html文档中最后的一个泡是document。
2、下面有个demo,我们经常用到的一个效果,显示/隐藏。当我一点击,div显示,在页面其他位置点击,div消失。以后是代码:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>仿select-事件冒泡</title>
<style>
#div1
{
width:200px;
height:200px;
background:#CCC;
display:none;
} </style>
<script>
window.onload = function()
{
var oBtn = document.getElementById('btn1');
var oDiv = document.getElementById('div1'); /*当点击按钮,div显示,,点击其他地方div隐藏*/
oBtn.onclick = function(evt)
{
var oEvent = evt || event; //evt 兼容FF/chrome浏览器
div1.style.display = 'block'; oEvent.cancelBubble = true; //取消事件冒泡(否则点击按钮后,会冒泡到最后一层上即document)
}
document.onclick = function()
{
div1.style.display = 'none'; alert('document被点击');
} }
</script>
</head>
<body>
<input type="button" value="点击我" id="btn1">
<div id="div1"></div>
</body>
</html>
在需要取消冒泡的地方:加一句oEvent.cancelBubble = true
兼容:IE6,FF,chrome等
三、学习js不仅要知道怎么样,还有要处理浏览器兼容,我晕了,第一个例子没能兼容IE6,再搜搜。学习果然是一场修行
最新文章
- linq in not in
- sublime text3 前端编译神器,浏览器实时显示
- pycharm 使用小结
- 实时监控mysql数据库变化
- java ssm框架入门(一)面向接口编程
- 模拟vector
- iOS音频处理
- 制作类似ThinkPHP框架中的PATHINFO模式功能(二)
- 百度地图JavaScript API本地搜索的结果面板
- 深度解密Go语言之关于 interface 的10个问题
- 案例解析|政府信息化的BI建设应用 .
- AX_ClassTemplate
- [C]字符串行为
- linux日常命令之一
- CuratorBarrier
- 可遇不可求的Question之flash的socket连接安全策略文件篇
- python程序编写中常见错误
- openvpn 的安装和使用方法
- python data analysis | python数据预处理(基于scikit-learn模块)
- Calendar类的一些不易区分的属性