Question

js 如何只触发最外层元素事件

Answer 1

1：这是javascript中的事件相关知识。你的问题属于事件冒泡或者事件捕捉。
false 为事件冒泡，true 为事件捕捉。默认为false。
<ul id="ul">
<li id="li">
<a href="javascript:void(0);" id="a">点我</a>
</li>
</ul>
function $(id){
return document.getElementById(id);
};
var ulDom = $("ul");
var liDom = $("li");
var aDom = $("a");
2：事件冒泡案例
ulDom.addEventListener("click",function(){
alert("ul");
//ul
},false);
liDom.addEventListener("click",function(){
alert("li");
//li
//ul
},false);
aDom.addEventListener("click",function(){
alert("a");
//a
//li
//ul
//这种从子元素传递到父级元素的行为叫冒泡
},false);
3：事件捕捉案例
ulDom.addEventListener("click",function(){
alert("ul");
//ul
},true);
liDom.addEventListener("click",function(){
alert("li");
//ul
//li
},true);
aDom.addEventListener("click",function(){
alert("a");
//ul
//li
//a
//这种事件从父级元素传递到子元素叫做时间捕捉
},true);
4：阻止事件冒泡行为

ulDom.addEventListener("click",function(){
alert("ul");
//ul
},false);
liDom.addEventListener("click",function(){
alert("li");
//li
//ul
},false);
aDom.addEventListener("click",function(e){
alert("a");
//a
e = e || event;
//支持所有浏览器，但是不符合W3C标准
//e.cancelBubble = true;
//如果不考虑IE678 可以是用stopPropagation
e.stopPropagation();
},false);
5：阻止事件捕捉行为
ulDom.addEventListener("click",function(e){
e = e || event;
alert("ul");
e.stopPropagation();
//cancelBubble在事件捕获中没有用
//e.cancelBubble= true;
cBubble(e);
//ul
},true);
liDom.addEventListener("click",function(){
alert("li");
//ul
},true);
aDom.addEventListener("click",function(){
alert("a");
//ul
},true);
6：对以上回答有哪里不理解请指正或追问