JavaScript click 事件在 div 上不起作用但 mouseenter 可以吗？答案

【问题标题】：JavaScript click event on document vs mousedown event on a button?JavaScript click 事件在 div 上不起作用但 mouseenter 可以吗？
【发布时间】：2022-10-01 11:02:01
【问题描述】：

我已经阅读并支持this question 的标题相同，但我遇到的问题不同。

在我的场景中，如果我用 mouseleave 或 mouseenter 替换单击事件名称，则该事件可以与其他任何相同的事件一起触发。

HTML：

const template = `
  <div id=\"tools\">
      <div id=\"container\">
          <div class=\"a\" id=\"a\" title=\'a\'></div>
          <div class=\"b\" id=\"b\" title=\'b\'></div>
      </div>
  </div>
`;

JS函数在扩展WebComponent HTMLElement的类的构造函数中调用：

called_in_constructor(){
    this.attachShadow({ mode: \"open\" });
    // const style = document.createElement(\"style\");
    // style.textContent = styled({});
    // this.shadowRoot.appendChild(style);
    this.shadowRoot.innerHTML += template;
    this.shadowRoot
      .getElementById(\"a\")
      .addEventListener(\"click\", () => this.write_some_log());
}

write_some_log(){
  console.log(\'click triggered\')
}

当我将 \"click\" 替换为 \"mouseenter\" 时，我可以在鼠标进入 SVG 后在 Devtool 控制台中看到 \'click trigger\' 消息（使用样式化函数作为背景图像添加），但它不会\' t 适用于点击事件。当我想通过单击来检查气泡/弹出窗口时，气泡/弹出窗口会消失，阻止我检查它。将 div 更改为按钮后，它也可以工作：

const template = `
  <div id=\"tools\">
      <div id=\"container\">
          <button class=\"a\" id=\"a\" title=\'a\'></div>
          <button class=\"b\" id=\"b\" title=\'b\'></div>
      </div>
  </div>
`;

有人可以提供一些建议吗？提前致谢。

标签： javascript event-handling mouseevent

【解决方案1】：

called_in_constructor(){
    this.attachShadow({ mode: "open" });
    this.shadowRoot.innerHTML += template;
    this.shadowRoot // what is shadowRoot?
      .getElementById("a")
      .addEventListener("click", () => this.write_some_log());
}

你可以写：

called_in_constructor(){
    this.attachShadow({ mode: "open" });
    this.shadowRoot.innerHTML += template;
    document.getElementById("a").addEventListener("click", () =>{ this.write_some_log()});    
}

【讨论】：

shadowRoot 属于一个名为 Shadow DOM 的独立 DOM。
实际上，您的代码不足以尝试我们自己。所以你能否分享你的总代码以达到真正的目的！
这是一个大系统，让我尝试提取相关部分。
似乎是因为 div 标签，因为 button 标签有效。