-
需求说明：
点击绿色控件不触发红色控件的对应的事件
如图:
cut1.jpg
Bug: 红色框和绿色框都设置了响应事件，当点击绿色框的时候，红色框的事件也会触发。
解决过程:
-
查资料
总所周知 js 一般都是使用冒泡流，在翻看《JavaScript高级程序设计》了解到中：
在通过HTML特性指定事件处理程序时，变量event中保存着event对象
cut2.jpg
-
把问题独立出来
写个小demo，由于项目内容比较多，容易造成迸发问题；这样也容易定位错误
cut3.jpg
js 代码如下:
$(document).on("click","#red",function(){
console.log("red");
});
$(document).on("click","#green",function(){
console.log("green");
});
$(document).on("click","#yellow",function(event){
console.log("yellow");
//event.stopPropagation();
});
-
分析思考与尝试
按照冒泡事件流顺序, 应该是由最具体的控件先行触发:依次是 yellow -> green -> red，实际上这里就是 red -> green -> yellow (按照代码先后顺序输出)
经过无数次确认，语法是没有问题的，后来笔者就怀疑到是不是类库本身的问题？于是就引用了jQuery类库，结果吓了笔者一跳，一样的代码，在jQuery下是没有任何问题的。
后来笔者猜想可能为了轻量级的缘故，削弱了on的功能，抹去他们之间的父子关系
事件绑定在document上致使他们独立出来了导致不能截断冒泡，
于是笔者就修改了下，把他们的父子关系还给他们
$(document).on("click","#red",function(){
console.log("red");
});
$("#red").on("click","#green",function(){
console.log("green");
});
$("#green").on("click","#yellow",function(event){
console.log("yellow");
event.stopPropagation();
});
于是Bug就解决了。
以上，笔者水平有限，如有错漏，敬请指出。
