logo 有点东西

chrome与firefox的点击事件差异

问题背景

使用element-ui的过程中发现<el-button>组件有个问题：按钮点击后获取的焦点不会自动释放，并且可以通过不停的按Enter键持续触发按钮重复点击。

此时想修改的功能有2个：

  1. 禁止Enter键触发按钮点击事件
  2. 按钮点击后获取的焦点不会自动释放

最初考虑过“全局禁用Enter键”的方案，但考虑到多行文本框、富文本组件、登录页快速登录等功能的使用，还是放弃了这样修改。最后通过点击事件 **PointerEvent **的pointerType属性判断是鼠标还是键盘：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
/**
 * 按钮点击事件
 * @param {PointerEvent} event
 */
function onClick (event) {
  // 只允许鼠标点击触发，禁止Enter键触发
  const isMouseClick = event.pointerType === 'mouse'
  if (!isMouseClick) {
    return
  }

  // fix: 按钮被点击后，持续保持焦点
  event.target.blur()

  this.$emit('click')
}

问题分析

经过本地测试没发现问题，于是我就提交了代码。晚些时候收到了测试人员反馈：在Firefox下按钮无法点击了！
在Firefox中打印日志排查发现，Firefox的PointerEvent对象并没有pointerType属性，取而代之的是独有属性mozInputSource，以下是MDN对于该属性的解释。

解决方法

修改检查判断，增加Firefox的兼容处理。同时针对Edge等浏览器做了兼容性测试（其他浏览器大多是基于chromium引擎的套壳，只要Chrome运行正常则基本不会有问题）。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
/**
 * 按钮点击事件
 * @param {PointerEvent} event
 */
function onClick (event) {
  // 只允许鼠标点击触发，禁止Enter键触发
  const isMouseClick = event.pointerType === 'mouse' || event.mozInputSource === 1
  if (!isMouseClick) {
    return
  }

  // fix: 按钮被点击后，持续保持焦点
  event.target.blur()

  this.$emit('click')
}

其他推荐内容

HTTP单个大文件与拆分小文件的资源加载对比
  • 2023/11/02
    • 编程

HTTP单个大文件与拆分小文件的资源加载对比

el-select启用filterable、multiple属性后，输入框错位的问题解决方法
  • 2023/10/10
    • 编程

el-select启用filterable、multiple属性后，输入框错位的问题解决方法

评论区