编辑按钮上的点击事件

Question

$(document).on('click','.edit',function(e){
            //阻止事件的冒泡
            e.stopPropagation();
            //获取shippingId
            var shippingId = $(this).parents('.address-item').data('id');
            _address.getAddressInfo(shippingId,function(res){
                _modal.show({
                    isUpdate : true,
                    data : res,
                    onSuccess : function(){
                        _this.loadAddressList();
                    }
                })
            },function(errMsg){
                _mm.errorTips(errMsg);
            })
        }；
    

如果在编辑按钮上阻止了事件的冒泡，那么在document上为什么还会捕获到点击事件呢？

Answer 1

Rosen 2019-01-04 17:26:50

stopPropagation调用以后是阻止它父级以上的元素的事件被触发，不是把当前事件也干掉。on这种绑定本来就是先冒到document，再下放到点击的元素做处理

• 提问者 Ammateur #1

  如果e.stopPropagation()是阻止事件继续在dom树上传播，当前的编辑按钮上的点击事件会被触发，但是作为按钮节点的祖先节点document上的点击事件为什么就不会触发呢？如果是按照事件捕获的顺序，document先捕获到点击事件，那为什么在编辑按钮的直接父元素上的点击事件就不会被触发了

• Rosen 回复 提问者 Ammateur #2

  stopPropagation能阻止事件冒泡但不阻止点击元素绑定的其他事件的执行，但如果使用事件代理的话，它是不阻止点击元素向代理元素冒泡的。想下，如果所有冒泡都屏蔽了，这种事件代理的绑定方式不就都失效了

• 提问者 Ammateur 回复 Rosen #3

  嗯，终于明白了，谢谢老师