event.stopPropagation()只能阻止父子元素中相同事件的冒泡和传递行为

-----------------------因为用的是element组件库中的按钮，所以按钮中带有span标签，文中的bug是因为点击了按钮中的span标签发生了事件冒泡所产生的-----------------------

今天在写项目的时候遇见了一个很有趣的情况，按钮的click事件和document的mousedown事件的先后执行顺序问题。

项目中需要完成的操作是需要我们选中某个方块，通过按钮的事件进行某些操作。

我们给document绑定上mousedown事件        --------- 因为有多个方块我们需要实现点击空白处取消选中方块的行为

这个时候我们进行业务的操作 会发现document的mousedown事件可以在按钮上触发的，这是因为事件冒泡的关系导致我们在触发按钮的mousedown事件时层层冒泡直到了document层，间接导致了我们的选中效果就消失，我们按钮的单击事件没有选中目标从而报错，

具体流程：span的mousedown -> button的mousedown -> 直到document层的mousedown事件，选中消失，span的click -> button的click 报错

//点其他地方选中移除
document.onmousedown = function (e) {

    that.HideOption(e);

};

// 绑定按钮进行某些操作
$("#btn_lock").on("click", function (event) {
   if(/*当前选中了某方块*/){
    //执行操作
   }
});

 解决的办法：

     1、我们可以通过更换事件来解决问题

document.onclick = function (e) {

    // 取消选中操作

}

但这样会出现一个问题，我在按钮按下去之后如果有弹窗需要我们进行确认时会发生选中的目标消失，原因是click事件的问题，那我们试试mouseup事件呢

document.onmouseup = function (e) {

    // 取消选中操作

}

如果你尝试了之后就会发现，并没有什么问题，但当你点击鼠标不松手将鼠标移入按钮的时候就会发现，他也会触发最初的问题。那有没有什么操作能够简单的解决问题呢？

  2、通过event.stopPropagation()进行阻止事件冒泡行为

我们只需要给该按钮添加一个onmousedown事件即可。

// 绑定按钮进行某些操作
// 绑定按钮进行某些操作
$("#btn_lock").on("mousedown", function (event) {
   event.stopPropagation()
});
$("#btn_lock").on("click", function (event) {
   if(/*当前选中了某方块*/){
    //执行操作
   }
});

直接是一个从根源进行阻止传递，唯一不好的点就是按钮多了的话都得加一个阻止冒泡的事件函数，大大浪费了性能。

tips：也能够阻止页面中所有button的mousedown的事件冒泡，根据自身项目变更。