试图编写Fluid App用户脚本以禁用概念侧边栏

Question

我是JS的新手，但正在尝试边做边学。

我使用概念，每当鼠标悬停在应用程序的左侧时，弹出的侧边栏都会使我非常恼火。

我读过某个地方，我可以使用Fluid应用程序推送用户脚本，并且可能可以通过自定义样式禁用该功能。

但是我似乎无法弄清楚如何获取JS或CSS来禁用鼠标悬停事件。

我想我找到了要侦听该事件的位置，但是我不确定如何删除该侦听器功能或停止该函数调用的后续步骤。

我认为这是触发事件的地方，有人可以建议吗？

Answer 1

您可以将一个mousemove捕获侦听器添加到带有侦听器的元素的容器中。在mousemove上，如果目标（事件要分派到的目标）是具有您不希望触发的页面侦听器的元素的后代，请在事件上调用stopPropagation。

例如，在下面的代码中，页面脚本在元素或其后代之一悬停时尝试为元素着色，但是第二部分（可以放入用户脚本中）将防止这种情况：

// Page script:
nested.addEventListener('mousemove', (e) => {
  nested.style.color = 'red';
});

// Userscript:
outer.addEventListener('mousemove', (e) => {
  if (e.target.closest('#nested')) {
    e.stopPropagation();
  }
}, true);

<div id="outer">
  outer
  <div id="nested">
    nested
    <div id="inner">
      inner
    </div>
  </div>
</div>