阻止事件冒泡

• 起因

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

• 解决

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

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

阻止冒泡直接stopPropagation就好。对这个不了解可以看看我之前的学习资料

• 问题

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

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

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

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

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

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

先说他们的区别：

• onchange

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

• onclick

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

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

  • 再次解决

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

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

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