登录 注册

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

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

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

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

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

image.png

image.png

  • 思源笔记

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

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

    25713 引用 • 106373 回帖
  • Q&A

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

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

相关帖子

被采纳的回答
  • 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 •
  • 其他回帖
  • 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 • • 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 •
  • EberhardLin • • 1
    订阅者 捐赠者 作者

    不好意思老铁，现在周五才有空，赶忙给你录制一段，让你久等了，我感觉录制没给出太多的信息，但就是无法使用。

    录制过程忘记开显示鼠标了，但我自己看了下，影响不是很大。

    注：视频有我解说的声音，请再打开前注意音量调节。

    1 回复
  • 查看全部回帖
EberhardLin
实事求是，追求进步。
回帖
173
 帖子
73
 积分
6864

近期热议

推荐标签 标签

  • 倾城之链
    23 引用 • 66 回帖 • 169 关注
  • V2EX

    V2EX 是创意工作者们的社区。这里目前汇聚了超过 400,000 名主要来自互联网行业、游戏行业和媒体行业的创意工作者。V2EX 希望能够成为创意工作者们的生活和事业的一部分。

    16 引用 • 236 回帖 • 255 关注
  • danl
    • 169 关注
  • OkHttp

    OkHttp 是一款 HTTP & HTTP/2 客户端库，专为 Android 和 Java 应用打造。

    16 引用 • 6 回帖 • 87 关注
  • Tomcat

    Tomcat 最早是由 Sun Microsystems 开发的一个 Servlet 容器，在 1999 年被捐献给 ASF（Apache Software Foundation），隶属于 Jakarta 项目，现在已经独立为一个顶级项目。Tomcat 主要实现了 JavaEE 中的 Servlet、JSP 规范，同时也提供 HTTP 服务，是市场上非常流行的 Java Web 容器。

    162 引用 • 529 回帖 • 2 关注
  • 京东

    京东是中国最大的自营式电商企业，2015 年第一季度在中国自营式 B2C 电商市场的占有率为 56.3%。2014 年 5 月，京东在美国纳斯达克证券交易所正式挂牌上市（股票代码：JD），是中国第一个成功赴美上市的大型综合型电商平台，与腾讯、百度等中国互联网巨头共同跻身全球前十大互联网公司排行榜。

    14 引用 • 102 回帖 • 315 关注
  • 笔记

    好记性不如烂笔头。

    310 引用 • 794 回帖
  • 反馈

    Communication channel for makers and users.

    121 引用 • 907 回帖 • 277 关注
  • GitLab

    GitLab 是利用 Ruby 一个开源的版本管理系统，实现一个自托管的 Git 项目仓库，可通过 Web 界面操作公开或私有项目。

    46 引用 • 72 回帖
  • SMTP

    SMTP（Simple Mail Transfer Protocol）即简单邮件传输协议，它是一组用于由源地址到目的地址传送邮件的规则，由它来控制信件的中转方式。SMTP 协议属于 TCP/IP 协议簇，它帮助每台计算机在发送或中转信件时找到下一个目的地。

    4 引用 • 18 回帖 • 634 关注
  • OpenShift

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

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

    NGINX 是一个高性能的 HTTP 和反向代理服务器，也是一个 IMAP/POP3/SMTP 代理服务器。 NGINX 是由 Igor Sysoev 为俄罗斯访问量第二的 Rambler.ru 站点开发的，第一个公开版本 0.1.0 发布于 2004 年 10 月 4 日。

    315 引用 • 547 回帖
  • Maven

    Maven 是基于项目对象模型（POM）、通过一小段描述信息来管理项目的构建、报告和文档的软件项目管理工具。

    188 引用 • 319 回帖 • 250 关注
  • 大疆创新

    深圳市大疆创新科技有限公司(DJI-Innovations，简称 DJI)，成立于 2006 年，是全球领先的无人飞行器控制系统及无人机解决方案的研发和生产商，客户遍布全球 100 多个国家。通过持续的创新，大疆致力于为无人机工业、行业用户以及专业航拍应用提供性能最强、体验最佳的革命性智能飞控产品和解决方案。

    2 引用 • 14 回帖
  • Love2D

    Love2D 是一个开源的， 跨平台的 2D 游戏引擎。使用纯 Lua 脚本来进行游戏开发。目前支持的平台有 Windows, Mac OS X, Linux, Android 和 iOS。

    14 引用 • 53 回帖 • 556 关注
  • OAuth

    OAuth 协议为用户资源的授权提供了一个安全的、开放而又简易的标准。与以往的授权方式不同之处是 oAuth 的授权不会使第三方触及到用户的帐号信息（如用户名与密码），即第三方无需使用用户的用户名与密码就可以申请获得该用户资源的授权，因此 oAuth 是安全的。oAuth 是 Open Authorization 的简写。

    36 引用 • 103 回帖 • 28 关注
  • WiFiDog

    WiFiDog 是一套开源的无线热点认证管理工具，主要功能包括：位置相关的内容递送；用户认证和授权；集中式网络监控。

    1 引用 • 7 回帖 • 610 关注
  • GraphQL

    GraphQL 是一个用于 API 的查询语言，是一个使用基于类型系统来执行查询的服务端运行时（类型系统由你的数据定义）。GraphQL 并没有和任何特定数据库或者存储引擎绑定，而是依靠你现有的代码和数据支撑。

    4 引用 • 3 回帖 • 12 关注
  • Hprose

    Hprose 是一款先进的轻量级、跨语言、跨平台、无侵入式、高性能动态远程对象调用引擎库。它不仅简单易用，而且功能强大。你无需专门学习，只需看上几眼，就能用它轻松构建分布式应用系统。

    9 引用 • 17 回帖 • 638 关注
  • WebComponents

    Web Components 是 W3C 定义的标准，它给了前端开发者扩展浏览器标签的能力，可以方便地定制可复用组件，更好的进行模块化开发，解放了前端开发者的生产力。

    1 引用 • 7 关注
  • 强迫症

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

    15 引用 • 161 回帖
  • 设计模式

    设计模式（Design pattern）代表了最佳的实践，通常被有经验的面向对象的软件开发人员所采用。设计模式是软件开发人员在软件开发过程中面临的一般问题的解决方案。这些解决方案是众多软件开发人员经过相当长的一段时间的试验和错误总结出来的。

    200 引用 • 120 回帖
  • BND

    BND（Baidu Netdisk Downloader）是一款图形界面的百度网盘不限速下载器，支持 Windows、Linux 和 Mac，详细介绍请看这里。

    107 引用 • 1281 回帖 • 34 关注
  • ReactiveX

    ReactiveX 是一个专注于异步编程与控制可观察数据（或者事件）流的 API。它组合了观察者模式，迭代器模式和函数式编程的优秀思想。

    1 引用 • 2 回帖 • 183 关注
  • 服务

    提供一个服务绝不仅仅是简单的把硬件和软件累加在一起，它包括了服务的可靠性、服务的标准化、以及对服务的监控、维护、技术支持等。

    41 引用 • 24 回帖 • 1 关注
  • 锤子科技

    锤子科技（Smartisan）成立于 2012 年 5 月，是一家制造移动互联网终端设备的公司，公司的使命是用完美主义的工匠精神，打造用户体验一流的数码消费类产品（智能手机为主），改善人们的生活质量。

    4 引用 • 31 回帖 • 2 关注
  • AngularJS

    AngularJS 诞生于 2009 年，由 Misko Hevery 等人创建，后为 Google 所收购。是一款优秀的前端 JS 框架，已经被用于 Google 的多款产品当中。AngularJS 有着诸多特性，最为核心的是：MVC、模块化、自动化双向数据绑定、语义化标签、依赖注入等。2.0 版本后已经改名为 Angular。

    12 引用 • 50 回帖 • 510 关注

最新标签