事件冒泡很简单,网上有很多答案,可是没有能够解决我的需求的答案,因为我的需求有点儿特殊.也正是这一点点差异性导致我弄了很久都没有改好.
1.简单的使用场景
<div onClick = { () => { alert('aaa'); } }>
<div onClick = { (e) => {e.stopPropagation();e.nativeEvent.stopImmediatePropagation();alert('bbb'); } } ></div>
</div>
实际使用场景将alert()函数替换为自己的函数就可以了. 这样做确实点击里面的div只会弹出'bbb',不会弹出'aaa'.点击事件的冒泡确实被阻止了.
2.Checkbox子组件有一个点击事件,点击它的子组件时Checkbox不会被选中
我刚开始运用第一种简单使用场景下的方法阻止Checkbox里面的子组件的点击事件,发现没有任何作用,这种情况下特别无奈,可是没法办法.后面请教别人时,二话不说直接加上一句代码就搞定:e.preventDefault().我一直在思考如何冒泡,没有去思考默认行为这些,还是没见过啥世面,学习了.
<Checkbox>
<div onClick = { (e) => {e.preventDefault();e.stopPropagation();e.nativeEvent.stopImmediatePropagation(); alert('bbb'); ></div>
</Checkbox>
如果觉得能够解决你的问题,麻烦点个赞鼓励一下.
