如何通过JS程序化触发列表项悬停并点击按钮（Chrome控制台适用）

列表项鼠标悬停时会动态生成并显示两个按钮，需要在Chrome控制台中通过JavaScript程序化地对每个列表项触发悬停操作，并点击目标按钮（适用于第三方网站的类似交互场景）。

核心思路 #

通过模拟浏览器的mouseover事件触发悬停状态（让按钮动态生成），再定位到对应列表项内的按钮并触发click事件，完成批量操作。

方法1：原生JavaScript（直接在Chrome控制台运行） #

// 获取目标列表下的所有列表项
const listItems = document.querySelectorAll('#list li');

listItems.forEach(item => {
    // 触发mouseover事件，触发悬停逻辑生成按钮
    item.dispatchEvent(new MouseEvent('mouseover', { bubbles: true }));
    
    // 定位当前列表项内的目标按钮（注意：原演示用了重复ID，实际网站请替换为类名或正确选择器）
    const targetButton = item.querySelector('#but1'); // 示例：替换为 '.button1' 或其他符合网站DOM的选择器
    if (targetButton) {
        targetButton.click(); // 触发按钮点击
    }
    
    // 可选：触发mouseout事件移除按钮，还原状态
    item.dispatchEvent(new MouseEvent('mouseout', { bubbles: true }));
});

方法2：jQuery（如果目标网站已加载jQuery） #

如果第三方网站引入了jQuery，可以用更简洁的写法：

$('#list li').each(function() {
    // 触发悬停进入事件
    $(this).trigger('mouseover');
    
    // 点击当前项内的目标按钮
    $(this).find('#but1').click(); // 同样需要根据实际DOM替换选择器
    
    // 可选：触发悬停离开事件
    $(this).trigger('mouseout');
});

关键注意事项 #

1. 选择器适配：原演示中按钮使用了重复的id（不符合HTML规范），实际第三方网站几乎都会用类名（如class="but1"）或其他属性区分按钮，务必根据目标网站的真实DOM结构修改选择器。
2. 异步兼容：如果目标网站的按钮生成存在异步延迟（比如接口请求后渲染），需要添加小延迟确保按钮已生成再点击：

   item.dispatchEvent(new MouseEvent('mouseover', { bubbles: true }));
   setTimeout(() => {
       const targetButton = item.querySelector('.but1');
       targetButton?.click();
       item.dispatchEvent(new MouseEvent('mouseout', { bubbles: true }));
   }, 150); // 延迟时间可根据网站实际情况调整
   

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