27、事件冒泡

来源：互联网发布：淘宝发错货的处理规定编辑：程序博客网时间：2024/06/14 09:21

事件冒泡：从子元素上产生事件的时候，事件会由低到高传递到父辈素上

阻止冒泡：

e.cancelBubble 默认值=false 也就是不阻止冒泡当改为true的时候阻止冒泡事件

e.stopPropagation();//IE浏览器中不兼容

e.stopPropagation?e.stopPropagation():e.cancelBubble=true;

<!doctype html><html lang="en"><head><meta charset="UTF-8"><meta name="Generator" content="EditPlus®"><meta name="Author" content=""><meta name="Keywords" content=""><meta name="Description" content=""><title></title><style type='text/css'>*{ margin:0; padding:0;}ul{height:40px;margin-top:50px;}ul li{list-style:none;width:100px;height:40px;line-height:40px;font-size:12px;font-family:'Microsoft yahei';text-align:center;background:#f60;color:#fff;float:left;border-right:1px solid #999;cursor:pointer;position:relative;}#hide{width:100px;height:200px;background:#999;top:40px;left:0;display:none;}</style></head><body><ul><li>首页</li><li id='li'>产品<div id='hide'></div></li><li>关于我们</li><li>联系方式</li></ul><script type="text/javascript">/*事件冒泡： 从子元素上产生事件的时候，事件会传递到父元素上阻止冒泡：e.cancelBubble  默认值=false 也就是不阻止冒泡  当改为true的时候阻止冒泡事件e.stopPropagation?e.stopPropagation():e.cancelBubble=true;*/var oLi = document.getElementById('li');var oHide = document.getElementById('hide');oLi.onclick = function(e){e = e || window.event;oHide.style.display = 'block';e.stopPropagation?e.stopPropagation():e.cancelBubble=true;//阻止冒泡，若不阻止冒泡在下拉框显示的同时，该点击事件会传递到父元素上，进而将display改为none}document.onclick = function(){oHide.style.display = 'none';}</script></body></html>

0 0