通过JavaScript移除Obsidian编辑模式下HTML元素上的点击事件监听器。

[0v0]

在Obsidian中通过HTML创建的页面元素在实时渲染编辑模式下默认挂载了一个点击事件监听器。这个事件会在用户点击元素时将目标转换为源码。

然而一些时候用户点击元素并不是为了编辑，而是执行一些其他的操作。例如向<input>中输入数据，通过<details>添加评论。

【Obsidian样式】调整Html的detail样式为简单评论区

可以实现，之所以点击展开会变成源码是因为obsidian会监听光标焦点事件将任何“正在编辑”的部分转换回源码。解决方式就是通过JavaScript移除事件。 为注释添加id或class： <details class="abc">注释</details> 使用DataviewJS或其他JavaScript工具执行下面的代码： let element = document.querySele…

为了让HTML元素执行正确的动作，可以通过下面的方法移除其中的监听器程序。

1. 注入新的监听器阻止其他监听器的执行

let element = document.querySelector(".abc"); // 获取需要进行操作的目标


element.addEventListener("click",event => event.stopImmediatePropagation(),true);

2. 捕获并移除点击事件监听器

let element = document.querySelector(".abc"); // 获取需要进行操作的目标

element.removeEventListener("click",getEventListeners(element.parentElement).click);

3. 向监听器添加方法中注入代码阻止目标元素被添加监听器

const addEventListener = Element.prototype.addEventListener;
Element.prototype.addEventListener = funtion(type, listener, options) {
    if (){ // 添加程序判断是否阻止添加监听器
        return
    }
    addEventListener .call(this, type, listener, options);
}

[wilson]

我喜欢通过newElement=element.cloneNode(true);newElement. addEventListener();element.parentNode.replaceChild(newElement, element);实现。

[0v0]

通过复制DOM对象重建的方式我也考虑过。但是我注意到挂载点击事件监听器的DOM对象是一个CodeMirror对象。

在 CodeMirror 文档中提到：编辑器内的 DOM 结构由编辑器管理。尝试向节点添加属性或改变节点结构通常只会导致编辑器立即将内容重置回原来的状态。

因此我认为修改DOM的方法存在一定的兼容风险。

[wilson]

学习了