bug修复---同时触发mousedown事件和touchstart事件

落日映苍穹つ 2022-12-22 15:30 189阅读 0赞

这两天遇到一个bug，每次点击下方键盘时，点击一次数字，文本框中会出现两次重复值，如下所示：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzM3NTA4NTMx_size_16_color_FFFFFF_t_70]  
而且console中还有以下报错信息：  
![在这里插入图片描述][20201120200348592.png]  
查看项目代码，代码如下：

因为该页面要适配PC和APP，所以绑定了`mousedown`和`touchstart`两个事件，猜测出现此问题的原因是在某些手机上同时触发了`mousedown`和`touchstart`事件。

通常事件的处理顺序为：

> touchstart touchmove touchend mousemove mousedown mouseup click

经过调试发现确实同时触发了两个事件，下面是解决思路：

1.添加`stop`事件修饰符阻止冒泡

@touchstart.stop="handleKeyboardClick(item.val, index)"

结果：console中没有报错信息，但是依然还是会触发两次。

2.添加`preventDefault`方法

1）在`handleKeyboardClick`方法中添加`e.preventDefault();`，只是添加了这一行代码，没有添加参数`e`，这样console控制台中会报错，但是文本框中只显示一次。

方案一：

handleKeyboardClick: function(code, index) { 
      e.preventDefault();
    }

结果：  
![在这里插入图片描述][20201120201212246.png]  
方案二：

handleKeyboardClick: function(code, index, e) { 
      e.preventDefault();
    }

结果：  
![在这里插入图片描述][20201120201256825.png]  
2）在`touchstart`事件中添加上`$event`

`@touchstart="handleKeyboardClick(item.val, index, $event)”`，console不报错，但是文本框显示两个一样的数字。

3.终极解决方案：把`mousedown`和`touchstart`两个事件拆开，判断设备，是PC的话调用`mousedown`事件，否则调用`touchstart`事件，这样可以解决该问题，但是缺点就是增加了重复代码。

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzM3NTA4NTMx_size_16_color_FFFFFF_t_70]: /images/20221120/11b4bca3210941099341e77528620249.png
[20201120200348592.png]: /images/20221120/77b2c52539134d558592d58eddcc0857.png
[20201120201212246.png]: /images/20221120/8d90fd12afc4452bb8259ac8eb9d9ae7.png
[20201120201256825.png]: /images/20221120/7fd18a083aa24fa382506069199d5486.png