如何用JavaScript点击HTML中类按钮的div元素？Lyrics Training自动化求助

问题核心 #

原生Element.click()方法常无法触发网站自定义交互——尤其是当按钮以div实现，且事件监听绑定在mousedown/mouseup这类非click事件，或实际交互目标是div内部子元素时。

可行解决方案 #

1. 模拟完整鼠标事件流

手动分发mousedown、mouseup、click事件，还原真实用户点击逻辑：

function simulateClick(element) {
  // 触发mousedown
  const mousedownEvt = new MouseEvent('mousedown', {
    bubbles: true,
    cancelable: true,
    view: window
  });
  element.dispatchEvent(mousedownEvt);

  // 触发mouseup
  const mouseupEvt = new MouseEvent('mouseup', {
    bubbles: true,
    cancelable: true,
    view: window
  });
  element.dispatchEvent(mouseupEvt);

  // 触发click
  const clickEvt = new MouseEvent('click', {
    bubbles: true,
    cancelable: true,
    view: window
  });
  element.dispatchEvent(clickEvt);
}

// 重构原有点击逻辑
const slots = [
  document.querySelector('.slot.s1'),
  document.querySelector('.slot.s2'),
  document.querySelector('.slot.s3'),
  document.querySelector('.slot.s4')
];

(async function runClicks() {
  for(const word of click_order) {
    const target = slots.find(slot => slot?.textContent.trim() === word.trim());
    if(target) {
      simulateClick(target);
      // 可选：添加延迟模拟真实操作间隔
      await new Promise(resolve => setTimeout(resolve, 300));
    }
  }
})();

2. 定位实际交互的子元素

从你提供的HTML结构来看，.slot内部的子元素（如span）可能才是事件绑定的目标，调整选择器：

// 直接选择slot内部的span元素
const slots = [
  document.querySelector('.slot.s1 span'),
  document.querySelector('.slot.s2 span'),
  document.querySelector('.slot.s3 span'),
  document.querySelector('.slot.s4 span')
];

// 后续复用上述simulateClick逻辑即可

3. 修正文本匹配逻辑

用textContent.trim()替代innerHTML，避免HTML标签或空白字符导致匹配失败：

// 替换原有判断逻辑
if(firstChoice.textContent.trim() === word.trim()) {
  simulateClick(firstChoice);
}
// 其余判断同理

4. 确保元素已加载完成

若代码执行时元素未渲染，点击会无效，添加等待逻辑：

function waitForElement(selector) {
  return new Promise(resolve => {
    if(document.querySelector(selector)) return resolve(document.querySelector(selector));
    
    const observer = new MutationObserver(mutations => {
      const elem = document.querySelector(selector);
      if(elem) {
        observer.disconnect();
        resolve(elem);
      }
    });
    observer.observe(document.body, { childList: true, subtree: true });
  });
}

// 使用示例
(async function() {
  const firstChoice = await waitForElement('.slot.s1');
  // 其余元素同理，再执行点击逻辑
})();

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