MutationObserver自动点击元素报错：click调用于非HTMLElement对象

这个错误的核心原因是你传递给setTimeout的click方法丢失了它的上下文（即原本的DOM元素）。当你直接写setTimeout(document.getElementById("...").click, 6000)时，click函数会被单独提取出来，执行时它的this指向的是全局对象（浏览器中是window），而不是目标HTMLElement，所以浏览器会报错说调用click的对象不是HTMLElement。

哪怕你设置了6秒延迟，这个上下文丢失的问题依然存在——这和元素是否加载完成没关系，你已经在回调里确认了elt存在，但传递方法的方式错了。

修复方案 #

你有几种简单的方式来解决这个问题：

• 用箭头函数包裹click调用
  箭头函数会保留外层的上下文，确保click方法是在目标元素上执行的：

  setTimeout(() => {
    elt.click();
  }, 6000);
  

• 使用bind绑定上下文
  把click方法的this绑定到目标元素上，确保执行时指向正确：

  setTimeout(elt.click.bind(elt), 6000);
  

• 在setTimeout回调中重新获取元素（可选）
  虽然你已经确认元素存在，但如果担心6秒内元素被移除，也可以在回调里再检查一次：

  setTimeout(() => {
    const targetElt = document.getElementById("topcmm-123flashchat-main-toolbar-message-type-option");
    if (targetElt) {
      targetElt.click();
    }
  }, 6000);
  

优化你的代码 #

另外，你可以把获取到的elt变量复用起来，不用重复调用document.getElementById，同时找到元素后跳出循环，让代码更简洁高效：

document.addEventListener("DOMContentLoaded", function(event) {
  var parentOfMyList = document.body;
  var config = { attributes: true, childList: true, subtree: true };
  
  var callback = function(mutationsList) {
    for (var mutation of mutationsList) {
      if (mutation.type == 'childList') {
        var elt = document.getElementById("topcmm-123flashchat-main-toolbar-message-type-option");
        if (elt) {
          setTimeout(() => {
            elt.click();
          }, 6000);
          observer.disconnect();
          break; // 找到元素后跳出循环，无需处理其他mutation
        }
      }
    }
  };
  
  var observer = new MutationObserver(callback);
  observer.observe(parentOfMyList, config);
});

这样修改后，click方法就能正确地在目标HTMLElement上执行，不会再出现那个错误了。

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