尝试编写 Fluid App 用户脚本以禁用概念侧边栏自动弹出行为

Question

编辑 - 工作解决方案

尝试禁用 javascript 事件是不行的，相反我最终在 DOM 中添加了一个额外的元素，用 css 切换侧边栏的可见性工作了。这不是我刚刚学习的最漂亮的解决方案，但它确实解决了问题。

它不能用作 Fluid 用户脚本，但可以用作浏览器中的 Greasemonkey/Tampermonkey 脚本。 Full code is on Github - 会喜欢有更多知识的人来改进它。

原版Post

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

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

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

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

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

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

Answer 1

您可以将鼠标移动捕获监听器添加到带有监听器的元素的容器中。在 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>

Answer 2

所以我无法使用最初的方法解决这个问题，最终尝试了一种完全不同的有效方法。

还不能弄清楚如何让它在 Fluid App 中工作，但我确实管理了一个 greasemonkey 用户脚本。

我没有尝试更改事件侦听器功能，而是控制侧边栏的可见性。

我在 DOM 中添加了一个按钮，并为该按钮提供了一个触发器来切换概念边栏的可见性。单击该按钮，侧边栏不可见，当您将鼠标悬停在左侧时，不会弹出任何内容。

这不是最漂亮的解决方案，因为它不会删除 notion 的现有侧边栏按钮，如果您不使用 notion 自己的按钮最小化侧边栏，那么格式可能有点不稳定，但作为破解它完全有效。

我对 JS 和一般编码还很陌生，所以这可能效率很低。但如果它对任何人有帮助，这里是 code in Github – 我希望有人能帮助我做得更好。

尝试编写 Fluid App 用户脚本以禁用概念侧边栏自动弹出行为

Trying to write a Fluid App userscript to disable notion sidebar auto popup behavior

javascript

userscripts

编辑 - 工作解决方案

原版Post