如何模拟hover后点击Gmail选中邮件的删除按钮并触发其onclick事件

解决方案 #

Gmail的UI组件基于Google内部的Closure框架开发，事件监听规则和普通页面不同，jQuery的模拟事件很多时候无法匹配框架校验规则，你可以用以下三种方案解决：

方案1：稳定属性定位+原生事件触发（最推荐）

两种状态下的删除按钮都携带固定属性act="10"，不会随hover状态变化，直接用该属性定位元素后触发原生点击事件即可，不需要先模拟hover：

// 同时匹配hover前后两种状态的删除按钮
const delBtn = document.querySelector('div[act="10"][title="Delete"], div[act="10"][data-tooltip="Delete"]');
// 触发原生点击事件，绕过框架事件限制
delBtn.dispatchEvent(new MouseEvent('click', {
  bubbles: true,
  cancelable: true,
  view: window
}));

方案2：修复原有延迟逻辑的bug

你之前的代码问题出在$delBtn2是在触发hover前声明的，此时元素还没有data-tooltip属性，这个jQuery对象实际上是空的，点击自然无效，修改为延迟后重新选择元素即可：

$('[title="Delete"]').trigger('mouseenter');
setTimeout(() => {
  // 延迟后重新选择已生成data-tooltip属性的删除按钮
  $('[data-tooltip="Delete"]').trigger('click');
}, 200);

方案3：模拟Gmail原生快捷键（适配性最强）

Gmail默认支持选中邮件后按Shift+3输出#直接删除邮件，不需要操作DOM元素，在Chrome扩展场景下适配性更强：

document.dispatchEvent(new KeyboardEvent('keydown', {
  key: '#',
  code: 'Digit3',
  shiftKey: true,
  bubbles: true,
  cancelable: true,
  view: window
}));

内容的提问来源于stack exchange，提问作者user7607751