阻止事件冒泡
function stopBubble(e){ if(e&&e.stopPropagation){//非 IE e.stopPropagation(); } else{//IE window.event.cancelBubble=true; } }
阻止默认事件
function stopDefault( e ) { //阻止默认浏览器动作(W3C) if ( e && e.preventDefault ) e.preventDefault(); //IE 中阻止函数器默认动作的方式 else window.event.returnValue = false; return false; }
事件委托
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<style>
#oul li{
display: block;
width: 600px;
height: 50px;
background-color: rgba(0,0,0,0.3);
margin: 20px;
}
</style>
<body>
<ul id="oul">
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<script>
var ul = document.querySelector("#oul");
ul.onclick = function (ev){
var ev = ev || window.event;
var target = ev.target || ev.srcElement;
if(target.nodeName.toLowerCase() == "li"){
alert("123")
}
//alert("123")
}
</script>
</body>
</html>