> For the complete documentation index, see [llms.txt](https://xiaohesong.gitbook.io/today-i-learn/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://xiaohesong.gitbook.io/today-i-learn/front-end/stories/zu-zhi-shi-jian-mao-pao.md).

# 阻止事件冒泡

* 起因

公司内部的组件库的table无行点击，提了个pr来支持行点击。但是table点击行会有展开和复选框等事件。这样会产生影响。

* 解决

解决这个很简单，只需要对事件进行阻止他的冒泡就可以了。

因为我们知道，事件默认是不进行阻止冒泡的。

阻止冒泡直接`stopPropagation`就好。对这个不了解可以看看我之前的[学习资料](https://github.com/xiaohesong/TIL/blob/master/front-end/javascript/events/%E4%BA%8B%E4%BB%B6%E5%86%92%E6%B3%A1%E5%92%8C%E6%8D%95%E8%8E%B7.md)

* 问题

对于展开等，阻止了冒泡就行了，但是对于`input`的`checkbox`却不起作用。

```jsx
onChange = (e) => {
  e.stopPropagation()
  ...
}

render() {
  return <input type='checkbox' ... onChange={this.onChange}>
}
```

类似这样的操作之后，发现没有卵用。这尼玛，不对呀。

查了资料之后，是由于事件类型的原因。

子级的`checkbox`和父级的`click`事件不属于同一类型。

先说他们的区别：

* `onchange`

  这个事件发生在有`value`的元素上，
* `onclick`

  这个基本发生在每个可见的元素上。

  还有一些其他的区别，比如触发的时机。

  * 再次解决

  为`input的checkbox`添加一个`click`事件，然后进行阻止冒泡，这样你就会发现冒泡被成功阻止。

  因为这只是针对目前仅有的元素进行冒泡，你也可以对其他标签进行阻止副作用，在行点击事件里查看当前元素是否为可交互类型。

  在下认为`button`, `input`, `a` 这些标签都是用户可能需要进行点击交互的，所以对这些标签进行检查。