登录 注册

可以通过 JS 代码实现鼠标中键展开文档吗？

本贴最后更新于 778 天前，其中的信息可能已经沧海桑田

在链滴看到这个帖子的回答，所以十分好奇可以通过添加 JS 代码片段的方式实现通过鼠标中键点击文档（父文档）时展开文档吗？

可以的话有会的兄弟可以帮我写一个吗，我不会写代码，也没有啥好拿得出手的，只能奉上 2000 积分求助了大家了！

不想打开链接的兄弟可以直接看图：

image.png

image.png

  • 思源笔记

    思源笔记是一款隐私优先的个人知识管理系统，支持完全离线使用，同时也支持端到端加密同步。

    融合块、大纲和双向链接，重构你的思维。

    25909 引用 • 107369 回帖
  • Q&A

    提问之前请先看《提问的智慧》，好的问题比好的答案更有价值。

    9948 引用 • 45189 回帖 • 77 关注
4 引用
[js] 求助 js 代码，左键展开文档树，中键打开文档 • wenbocn
[css] [js] 思源笔记用到现在积累的所有代码片段 • JeffreyChen
点击展开文档树 • wenbocn
希望在文档数中鼠标中键点击上级目录可展开下级文档树
2000 悬赏
3 收藏
4 引用
6 回帖
3
2
954 209 16 459 18 15 237

相关帖子

被采纳的回答
  • Undii • • 2 • 2 赞同
    付费者 捐赠者 
    // 中键点击展开：基于 https://ld246.com/article/1682476267736/comment/1682479365610?r=Undii#comments

let g_reset = setInterval(main, 2000);

function main() {
    if (document.querySelector('.sy__file')) {
        clearInterval(g_reset);
    }else{
        return false;
    }
    document.querySelector('.sy__file').addEventListener('mousedown', event => {
        if (event.button != 1) return;
        event.preventDefault();
        if (!event.target.classList.contains('b3-list-item__text')) return;
        if (event.target.parentNode.getAttribute("data-type") !== "navigation-file") return;
        const b3ListItemToggle = event.target.parentNode.querySelector('.b3-list-item__toggle');
        if (b3ListItemToggle.classList.contains('fn__hidden')) return;
        b3ListItemToggle.click();
    });
}

​

    第三版：与第二版差不多【扩大响应范围（中键点左边的空白、:和 + 都会响应，但可能有副作用）】。应该能适合更多用户的情况。

    // 中键点击展开3：基于https://ld246.com/article/1682476267736
(function(){
    let g_reset = setInterval(main, 2000);

    function main() {
        if (document.querySelector('.sy__file')) {
            clearInterval(g_reset);
        }else{
            return false;
        }
        document.querySelector('.sy__file').addEventListener('mousedown', event => {
            if (event.button != 1) return;
            let notTitleFlag = false;
            if (!event.target.classList.contains('b3-list-item__text')) notTitleFlag = true;
            let target = event.target.parentNode;
            let temp = event.target;
            //console.log("0426",event);
            for (let i = 0; i < 4 && temp; i++) {
                if (temp?.getAttribute("data-type") == "navigation-file"
                    || temp?.getAttribute("data-type") == "navigation-root") {
                    target = temp;
                    break;
                }
                temp = temp?.parentNode;
            }
            //console.log("0426target", target);
            if (target?.getAttribute("data-type") == "navigation-file"
              || target?.getAttribute("data-type") == "navigation-root") {
                const b3ListItemToggle = target.querySelector('.b3-list-item__toggle');
                const title = target.querySelector('.b3-list-item__text');
                if (b3ListItemToggle.classList.contains('fn__hidden')) return;
                event.preventDefault();
                b3ListItemToggle.click();
                if (event.ctrlKey) {
                    title.click();
                }
            }
        }, true);
    }
})();


​
6 回帖
可以通过 JS 代码实现鼠标中键展开文档吗？

欢迎来到这里！

我们正在构建一个小众社区，大家在这里相互信任，以平等 • 自由 • 奔放的价值观进行分享交流。最终，希望大家能够找到与自己志同道合的伙伴，共同成长。

注册 关于
请输入回帖内容 ...
  • Undii • • 2 • 2 赞同 • 4 评论
    付费者 捐赠者 
    // 中键点击展开：基于 https://ld246.com/article/1682476267736/comment/1682479365610?r=Undii#comments

let g_reset = setInterval(main, 2000);

function main() {
    if (document.querySelector('.sy__file')) {
        clearInterval(g_reset);
    }else{
        return false;
    }
    document.querySelector('.sy__file').addEventListener('mousedown', event => {
        if (event.button != 1) return;
        event.preventDefault();
        if (!event.target.classList.contains('b3-list-item__text')) return;
        if (event.target.parentNode.getAttribute("data-type") !== "navigation-file") return;
        const b3ListItemToggle = event.target.parentNode.querySelector('.b3-list-item__toggle');
        if (b3ListItemToggle.classList.contains('fn__hidden')) return;
        b3ListItemToggle.click();
    });
}

​

    第三版：与第二版差不多【扩大响应范围（中键点左边的空白、:和 + 都会响应，但可能有副作用）】。应该能适合更多用户的情况。

    // 中键点击展开3：基于https://ld246.com/article/1682476267736
(function(){
    let g_reset = setInterval(main, 2000);

    function main() {
        if (document.querySelector('.sy__file')) {
            clearInterval(g_reset);
        }else{
            return false;
        }
        document.querySelector('.sy__file').addEventListener('mousedown', event => {
            if (event.button != 1) return;
            let notTitleFlag = false;
            if (!event.target.classList.contains('b3-list-item__text')) notTitleFlag = true;
            let target = event.target.parentNode;
            let temp = event.target;
            //console.log("0426",event);
            for (let i = 0; i < 4 && temp; i++) {
                if (temp?.getAttribute("data-type") == "navigation-file"
                    || temp?.getAttribute("data-type") == "navigation-root") {
                    target = temp;
                    break;
                }
                temp = temp?.parentNode;
            }
            //console.log("0426target", target);
            if (target?.getAttribute("data-type") == "navigation-file"
              || target?.getAttribute("data-type") == "navigation-root") {
                const b3ListItemToggle = target.querySelector('.b3-list-item__toggle');
                const title = target.querySelector('.b3-list-item__text');
                if (b3ListItemToggle.classList.contains('fn__hidden')) return;
                event.preventDefault();
                b3ListItemToggle.click();
                if (event.ctrlKey) {
                    title.click();
                }
            }
        }, true);
    }
})();


​
    3 回复
    1 引用
    2 操作
    Undii 在 2023-04-30 22:21:55 更新了该回帖
    Undii 在 2023-04-26 22:13:57 更新了该回帖
    谢谢，但是我添加 JS 片段后似乎无法成功，不知道我哪里做错了。
    EberhardLin •
    @EberhardLin 可以打开开发者工具（ctrl+shift+i）-> 控制台（console），截下屏看看有没有红色的报错吗？
    Undii •
    @EberhardLin 我加入代码片段后可以用中键打开笔记了。你会不会是代码片段末尾的文字没删掉，思源复制到外部会带几行说明文字，会不会是那个导致的报错？
    Gaffey •
    @Gaffey 没我在粘贴的时候留意到了，但是我有个 CSS 代码片段，我把他关闭再试试。
    EberhardLin •
  • 其他回帖
  • EberhardLin • • 6 评论
    订阅者 捐赠者 作者

    思源笔记代码片段无法中键展开文档.gif

    你看一下，鼠标点击是用鼠标中键点的，无法展开。

    麻烦试一下第二版，如果还是不行，开发者工具再看一下日志（带 0426 的输出）
    Undii •
    @Undii 我看到第二版了，我现在来试，原来第一张回帖更新了，我没发现不好意思！
    EberhardLin •
    @Undii 我试了，还是不行，我和你一样都是 Windows（我是 10）+v2.8.6，我现在怀疑是不是我这里有什么问题，最后怎么在开发者工具看日志呀？
    EberhardLin •
    @EberhardLin 还是像之前一样，打开到控制台，过滤那里输入 0426，再中键点一下文档，看一下那里输出的东西（另外，MouseEvent 需要展开一下，确认 button、buttons（应该分别是 1,4）；点 target:后面的内容，跳转到 html 结构，再截一下屏，谢谢）
    Undii •
    @Undii 不好意思大佬，昨晚太晚就没注意去休息了，我今天一打开看到 dammy 分享的稻草屋老铁写的代码，随手测试了一下可以用，但是你的两个代码却失效，我现在比较怀疑是我的机子有问题，但是不好排查，如果你需要的话我可以给你录屏（开着开发者工具下测试第一版、第二版代码），十分感谢！
    EberhardLin •
    @EberhardLin 应该不是电脑的问题，代码可能没考虑一些情况，方便的话麻烦录下屏幕吧，感谢
    Undii •
  • Undii • • 2 • 1 赞同 • 2 评论
    付费者 捐赠者

    感谢录屏演示！这个像是没有捕捉到中键点下的事件。（PS.正常的话，这个代码片段应该会输出两条消息）

    图片.png

    方便的话，麻烦再试最后一次，（这个版本使用事件捕捉。还不行的话大概我就无能为力了）：

    // 中键点击展开3：基于https://ld246.com/article/1682476267736
(function(){
    let g_reset = setInterval(main, 2000);

    function main() {
        if (document.querySelector('.sy__file')) {
            clearInterval(g_reset);
        }else{
            return false;
        }
        document.querySelector('.sy__file').addEventListener('mousedown', event => {
            if (event.button != 1) return;
            let notTitleFlag = false;
            if (!event.target.classList.contains('b3-list-item__text')) notTitleFlag = true;
            let target = event.target.parentNode;
            let temp = event.target;
            console.log("0426",event);
            for (let i = 0; i < 4 && temp; i++) {
                if (temp?.getAttribute("data-type") == "navigation-file"
                    || temp?.getAttribute("data-type") == "navigation-root") {
                    target = temp;
                    break;
                }
                temp = temp?.parentNode;
            }
            console.log("0426target", target);
            if (target?.getAttribute("data-type") == "navigation-file"
              || target?.getAttribute("data-type") == "navigation-root") {
                const b3ListItemToggle = target.querySelector('.b3-list-item__toggle');
                const title = target.querySelector('.b3-list-item__text');
                if (b3ListItemToggle.classList.contains('fn__hidden')) return;
                event.preventDefault();
                b3ListItemToggle.click();
                if (event.ctrlKey) {
                    title.click();
                }
            }
        }, true);
    }
})();
​
    经过测试，发现可以正常使用了！并且控制台也确实在每次中键展开文档时给出两条信息，完美实现了我想要的功能，太感谢了！
    EberhardLin • • 1
    可以的话，麻烦你把这一版代码更新到我采纳的回帖里吧，让有需要的人可以看到。我本想重新编辑该帖，但发现积分只能增加，积分没那么多，只能麻烦大佬你了！
    EberhardLin •
  • dammy • • 1 • 1 赞同 • 2 评论
    订阅者 支持者 勇士

    群里热心的 HBuilderX-Light-主题作者稻草屋老铁写了个片段，老铁你可以试试，由于我不怎么经常上链滴没找到他链滴 ID…如果在你那里有用的话也不用给我积分了，给他的主题点个 star 吧

    (() => {
    setInterval(() => {
        var listtexts = document.querySelectorAll('.sy__file .b3-list-item--hide-action');
        for (let index = 0; index < listtexts.length; index++) {
            listtexts[index].removeEventListener("mousedown", e);
            listtexts[index].addEventListener("mousedown", e)
        }
    }, 200)

    function e(e) {
        if (e.button != 1) return;
        try {
            e.target.previousElementSibling.previousElementSibling.click();
        } catch (error) { }
    }
})();
​
    感谢！已点 Star！
    EberhardLin •
    这个版本代码可以中键展开，不能中键收起。前面那位大佬的代码片段我也成功启用了，可以用中键展开和关闭子文档。
    Gaffey •
  • 查看全部回帖
EberhardLin
实事求是，追求进步。
回帖
173
 帖子
73
 积分
6864

近期热议

推荐标签 标签

  • 心情

    心是产生任何想法的源泉，心本体会陷入到对自己本体不能理解的状态中，因为心能产生任何想法，不能分出对错，不能分出自己。

    59 引用 • 369 回帖
  • 持续集成

    持续集成（Continuous Integration）是一种软件开发实践，即团队开发成员经常集成他们的工作，通过每个成员每天至少集成一次，也就意味着每天可能会发生多次集成。每次集成都通过自动化的构建（包括编译，发布，自动化测试）来验证，从而尽早地发现集成错误。

    15 引用 • 7 回帖 • 1 关注
  • Log4j

    Log4j 是 Apache 开源的一款使用广泛的 Java 日志组件。

    20 引用 • 18 回帖 • 35 关注
  • Android

    Android 是一种以 Linux 为基础的开放源码操作系统，主要使用于便携设备。2005 年由 Google 收购注资，并拉拢多家制造商组成开放手机联盟开发改良，逐渐扩展到到平板电脑及其他领域上。

    336 引用 • 324 回帖
  • Openfire

    Openfire 是开源的、基于可拓展通讯和表示协议 (XMPP)、采用 Java 编程语言开发的实时协作服务器。Openfire 的效率很高，单台服务器可支持上万并发用户。

    6 引用 • 7 回帖 • 119 关注
  • FFmpeg

    FFmpeg 是一套可以用来记录、转换数字音频、视频，并能将其转化为流的开源计算机程序。

    23 引用 • 32 回帖
  • HBase

    HBase 是一个分布式的、面向列的开源数据库，该技术来源于 Fay Chang 所撰写的 Google 论文 “Bigtable：一个结构化数据的分布式存储系统”。就像 Bigtable 利用了 Google 文件系统所提供的分布式数据存储一样，HBase 在 Hadoop 之上提供了类似于 Bigtable 的能力。

    17 引用 • 6 回帖 • 66 关注
  • GitHub

    GitHub 于 2008 年上线，目前，除了 Git 代码仓库托管及基本的 Web 管理界面以外，还提供了订阅、讨论组、文本渲染、在线文件编辑器、协作图谱（报表）、代码片段分享（Gist）等功能。正因为这些功能所提供的便利，又经过长期的积累，GitHub 的用户活跃度很高，在开源世界里享有深远的声望，并形成了社交化编程文化（Social Coding）。

    209 引用 • 2040 回帖
  • API

    应用程序编程接口（Application Programming Interface）是一些预先定义的函数，目的是提供应用程序与开发人员基于某软件或硬件得以访问一组例程的能力，而又无需访问源码，或理解内部工作机制的细节。

    79 引用 • 431 回帖
  • PostgreSQL

    PostgreSQL 是一款功能强大的企业级数据库系统，在 BSD 开源许可证下发布。

    22 引用 • 22 回帖
  • 人工智能

    人工智能（Artificial Intelligence）是研究、开发用于模拟、延伸和扩展人的智能的理论、方法、技术及应用系统的一门技术科学。

    115 引用 • 317 回帖 • 1 关注
  • Sublime

    Sublime Text 是一款可以用来写代码、写文章的文本编辑器。支持代码高亮、自动完成，还支持通过插件进行扩展。

    10 引用 • 5 回帖
  • MongoDB

    MongoDB（来自于英文单词“Humongous”，中文含义为“庞大”）是一个基于分布式文件存储的数据库，由 C++ 语言编写。旨在为应用提供可扩展的高性能数据存储解决方案。MongoDB 是一个介于关系数据库和非关系数据库之间的产品，是非关系数据库当中功能最丰富，最像关系数据库的。它支持的数据结构非常松散，是类似 JSON 的 BSON 格式，因此可以存储比较复杂的数据类型。

    91 引用 • 59 回帖 • 5 关注
  • CentOS

    CentOS（Community Enterprise Operating System）是 Linux 发行版之一，它是来自于 Red Hat Enterprise Linux 依照开放源代码规定释出的源代码所编译而成。由于出自同样的源代码，因此有些要求高度稳定的服务器以 CentOS 替代商业版的 Red Hat Enterprise Linux 使用。两者的不同在于 CentOS 并不包含封闭源代码软件。

    240 引用 • 224 回帖
  • OpenShift

    红帽提供的 PaaS 云，支持多种编程语言，为开发人员提供了更为灵活的框架、存储选择。

    14 引用 • 20 回帖 • 662 关注
  • Redis

    Redis 是一个开源的使用 ANSI C 语言编写、支持网络、可基于内存亦可持久化的日志型、Key-Value 数据库，并提供多种语言的 API。从 2010 年 3 月 15 日起，Redis 的开发工作由 VMware 主持。从 2013 年 5 月开始，Redis 的开发由 Pivotal 赞助。

    284 引用 • 248 回帖
  • 强迫症

    强迫症（OCD）属于焦虑障碍的一种类型，是一组以强迫思维和强迫行为为主要临床表现的神经精神疾病，其特点为有意识的强迫和反强迫并存，一些毫无意义、甚至违背自己意愿的想法或冲动反反复复侵入患者的日常生活。

    15 引用 • 161 回帖 • 6 关注
  • 游戏

    沉迷游戏伤身，强撸灰飞烟灭。

    185 引用 • 825 回帖
  • 知乎

    知乎是网络问答社区，连接各行各业的用户。用户分享着彼此的知识、经验和见解，为中文互联网源源不断地提供多种多样的信息。

    10 引用 • 66 回帖 • 1 关注
  • 博客

    记录并分享人生的经历。

    273 引用 • 2388 回帖
  • Logseq

    Logseq 是一个隐私优先、开源的知识库工具。

    Logseq is a joyful, open-source outliner that works on top of local plain-text Markdown and Org-mode files. Use it to write, organize and share your thoughts, keep your to-do list, and build your own digital garden.

    7 引用 • 69 回帖 • 4 关注
  • 创业

    你比 99% 的人都优秀么？

    82 引用 • 1395 回帖 • 1 关注
  • 思源笔记

    思源笔记是一款隐私优先的个人知识管理系统，支持完全离线使用，同时也支持端到端加密同步。

    融合块、大纲和双向链接，重构你的思维。

    25909 引用 • 107368 回帖
  • 七牛云

    七牛云是国内领先的企业级公有云服务商，致力于打造以数据为核心的场景化 PaaS 服务。围绕富媒体场景，七牛先后推出了对象存储，融合 CDN 加速，数据通用处理，内容反垃圾服务，以及直播云服务等。

    29 引用 • 230 回帖 • 126 关注
  • PHP

    PHP（Hypertext Preprocessor）是一种开源脚本语言。语法吸收了 C 语言、 Java 和 Perl 的特点，主要适用于 Web 开发领域，据说是世界上最好的编程语言。

    167 引用 • 408 回帖 • 489 关注
  • RemNote
    2 引用 • 16 回帖 • 19 关注
  • 黑曜石

    黑曜石是一款强大的知识库工具，支持本地 Markdown 文件编辑，支持双向链接和关系图。

    A second brain, for you, forever.

    24 引用 • 242 回帖

最新标签