关于vant组件ActionSheet事件穿透的问题以及解决方案

本是古典何须时尚 2023-02-21 06:12 16阅读 0赞

关于vant的一些组件我真的不想吐槽了，例如动作面板actionSheet这个组件，在弹出层点击之后居然都是事件穿透…，我这里贴一个例子吧，这是我在公司负责的一个h5项目，点击评价时会显示动作面板，如下：(这是一个工单列表，点击红色框框内除了按钮位置都会跳转到工单详情页)

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MDYxODA2OA_size_16_color_FFFFFF_t_70]  
此时我点击评价，弹出actionSheet动作面板  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MDYxODA2OA_size_16_color_FFFFFF_t_70 1]  
如果此时有需求是点击遮罩层隐藏动作面板，那么问题就来了，如果遮罩层后有点击事件，那么会发生事件穿透，在这个例子即是我点击遮罩层就直接进入到工单详情页了，这显然不合理。（更坑的是…点击下面的取消按钮也同样会发生事件穿透，我哭了）

在这，有两个解决方法，建议采取第一个方法，比较简单

**（1）还好这个actionSheet组件有一个监听点击遮罩层的事件**  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MDYxODA2OA_size_16_color_FFFFFF_t_70 2]  
**在data中创建一个变量来保存是否点击了遮罩层，当点击遮罩层时就把这个变量置为true, 添加定时器，短暂时间后变为false，因为你后续还是要进入详情页的，不能一直禁着**  
![在这里插入图片描述][20200628231813507.png]  
**再结合进入工单详情页前的判断就可以解决事件穿透的问题啦，如果是点击遮罩层过来的，那就不跳转。代码如下：**  
!\[在这里插入图片描述\](https://img-blog.csdnimg.cn/20200628232010690.png![在这里插入图片描述][20200628232036420.png]

**（2）通过事件捕获的形式来阻止事件穿透，思路如下：当点击遮罩层时，会逐层去捕获绑定的点击事件，此时你只需要在被事件穿透后点击到的元素的父元素上把该点击事件捕获并拦截，也能成功阻止该组件的事件穿透。具体请自行查阅相关文档。**

补充：至于那个点击取消按钮也会事件穿透的bug，我的解决方法是为动作面板添加点击事件，并阻止其事件冒泡和默认事件。  
![在这里插入图片描述][20200628232849486.png]  
![在这里插入图片描述][20200628232907828.png]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MDYxODA2OA_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20200628230540408.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MDYxODA2OA==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MDYxODA2OA_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20200628230807842.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MDYxODA2OA==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MDYxODA2OA_size_16_color_FFFFFF_t_70 2]: https://img-blog.csdnimg.cn/20200628231504197.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MDYxODA2OA==,size_16,color_FFFFFF,t_70
[20200628231813507.png]: https://img-blog.csdnimg.cn/20200628231813507.png
[20200628232036420.png]: https://img-blog.csdnimg.cn/20200628232036420.png
[20200628232849486.png]: https://img-blog.csdnimg.cn/20200628232849486.png
[20200628232907828.png]: https://img-blog.csdnimg.cn/20200628232907828.png