JavaScript中按钮已选中，但.click()触发成功却无实际点击效果

我正在编写一个JavaScript用户脚本，目标是自动点击某网页上的‘Voir plus’按钮。使用waitForElm函数定位按钮元素正常，控制台输出‘Element is ready: Voir plus’说明元素已找到，但执行elm.click()后点击操作并未生效，控制台显示‘Click event triggered successfully.’，添加setTimeout包裹点击也无法解决问题。

以下是我的代码：

function waitForElm(selector) {
    return new Promise(resolve => {
        if (document.querySelector(selector)) {
            return resolve(document.querySelector(selector));
        }

        const observer = new MutationObserver(mutations => {
            if (document.querySelector(selector)) {
                observer.disconnect();
                resolve(document.querySelector(selector));
            }
        });

        observer.observe(document.body, {
            childList: true,
            subtree: true
        });
    });
}

waitForElm('div[data-qa-id="adview_description_container"] > button').then((elm) => {
    if (elm) {
        console.log('Element is ready: ' + elm.textContent);
        try {
            elm.click();
            console.log('Click event triggered successfully.');
        } catch (error) {
            console.error('Error while clicking the element:', error);
        }
    } else {
        console.error('Element not found.');
    }
}).catch((error) => {
    console.error('Error while waiting for the element:', error);
});

• 模拟完整鼠标点击事件
  原生click()有时无法触发元素上的所有绑定事件，尝试用dispatchEvent模拟真实用户的点击流程：

  // 替换原有的elm.click()
  const clickEvent = new MouseEvent('click', {
      bubbles: true,
      cancelable: true,
      view: window
  });
  elm.dispatchEvent(clickEvent);
  

• 确保元素可见无遮挡
  部分网站会忽略不可见元素的点击，先将元素滚动到视口内再执行点击：

  elm.scrollIntoView({ behavior: 'auto', block: 'center' });
  setTimeout(() => {
      const clickEvent = new MouseEvent('click', {
          bubbles: true,
          cancelable: true,
          view: window
      });
      elm.dispatchEvent(clickEvent);
  }, 100);
  

• 调整用户脚本运行时机
  若脚本默认在页面加载完成前运行，可能元素的事件绑定还未完成。在脚本元信息中设置@run-at document-idle，确保页面所有资源和事件绑定完成后再执行：

  // ==UserScript==
  // @name         Auto Click Voir Plus
  // @version      0.1
  // @description  自动点击Voir plus按钮
  // @match        https://www.leboncoin.fr/jeux_video/*
  // @run-at       document-idle
  // @grant        none
  // ==/UserScript==
  

• 直接修改DOM实现展开
  有些按钮点击后是通过修改类名或样式实现内容展开，可直接操作DOM绕过事件绑定问题：

  const container = document.querySelector('div[data-qa-id="adview_description_container"]');
  // 移除收缩类名（需根据实际DOM结构调整类名）
  container.classList.remove('collapsed');
  // 或直接设置容器高度为自适应
  container.style.height = 'auto';
  

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