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

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

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

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

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

image.png

image.png

  • 思源笔记

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

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

    22338 引用 • 89385 回帖
  • Q&A

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

    8112 引用 • 37003 回帖 • 160 关注

相关帖子

被采纳的回答
  • 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);
        }
    })();
    
    
    

欢迎来到这里!

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

注册 关于
请输入回帖内容 ...
  • 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 4 评论

    image.png

    大佬,控制台空空如也诶

    但是左侧边栏有这些:

    image.png


    2023 年 4 月 26 日 16:13:02

    @Undii “删除 location.reload()“后:

    image.png

    1 操作
    EberhardLin 在 2023-04-26 16:14:48 更新了该回帖
    上面好像加了过滤条件 location.reload()?把那个删掉看看有没有显示错误信息?
    Undii
    这个报错是因为这是第二次加载这个代码片段。麻烦再在开发者工具打开的情况下按 ctrl+R 重载一下界面,然后中键点一个文档,再看看报错?
    Undii
    @Undii 依然不行,Ctrl+R 重载后再尝试中间点一个文档无反应,且开发者工具没有给出报错(无错误,无警告)
    EberhardLin
    @EberhardLin 我这边是 windows+2.8.6 能用。可能需要改代码加点输出才能定位
    Undii
  • 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
  • 查看全部回帖

推荐标签 标签

  • Notion

    Notion - The all-in-one workspace for your notes, tasks, wikis, and databases.

    6 引用 • 38 回帖
  • 前端

    前端技术一般分为前端设计和前端开发,前端设计可以理解为网站的视觉设计,前端开发则是网站的前台代码实现,包括 HTML、CSS 以及 JavaScript 等。

    247 引用 • 1348 回帖
  • HBase

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

    17 引用 • 6 回帖 • 73 关注
  • Flume

    Flume 是一套分布式的、可靠的,可用于有效地收集、聚合和搬运大量日志数据的服务架构。

    9 引用 • 6 回帖 • 629 关注
  • B3log

    B3log 是一个开源组织,名字来源于“Bulletin Board Blog”缩写,目标是将独立博客与论坛结合,形成一种新的网络社区体验,详细请看 B3log 构思。目前 B3log 已经开源了多款产品:SymSoloVditor思源笔记

    1063 引用 • 3453 回帖 • 203 关注
  • GraphQL

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

    4 引用 • 3 回帖 • 9 关注
  • IBM

    IBM(国际商业机器公司)或万国商业机器公司,简称 IBM(International Business Machines Corporation),总公司在纽约州阿蒙克市。1911 年托马斯·沃森创立于美国,是全球最大的信息技术和业务解决方案公司,拥有全球雇员 30 多万人,业务遍及 160 多个国家和地区。

    17 引用 • 53 回帖 • 136 关注
  • RYMCU

    RYMCU 致力于打造一个即严谨又活泼、专业又不失有趣,为数百万人服务的开源嵌入式知识学习交流平台。

    4 引用 • 6 回帖 • 51 关注
  • 小薇

    小薇是一个用 Java 写的 QQ 聊天机器人 Web 服务,可以用于社群互动。

    由于 Smart QQ 从 2019 年 1 月 1 日起停止服务,所以该项目也已经停止维护了!

    34 引用 • 467 回帖 • 742 关注
  • 心情

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

    59 引用 • 369 回帖
  • SVN

    SVN 是 Subversion 的简称,是一个开放源代码的版本控制系统,相较于 RCS、CVS,它采用了分支管理系统,它的设计目标就是取代 CVS。

    29 引用 • 98 回帖 • 680 关注
  • Spring

    Spring 是一个开源框架,是于 2003 年兴起的一个轻量级的 Java 开发框架,由 Rod Johnson 在其著作《Expert One-On-One J2EE Development and Design》中阐述的部分理念和原型衍生而来。它是为了解决企业应用开发的复杂性而创建的。框架的主要优势之一就是其分层架构,分层架构允许使用者选择使用哪一个组件,同时为 JavaEE 应用程序开发提供集成的框架。

    944 引用 • 1459 回帖 • 17 关注
  • 开源中国

    开源中国是目前中国最大的开源技术社区。传播开源的理念,推广开源项目,为 IT 开发者提供了一个发现、使用、并交流开源技术的平台。目前开源中国社区已收录超过两万款开源软件。

    7 引用 • 86 回帖
  • C

    C 语言是一门通用计算机编程语言,应用广泛。C 语言的设计目标是提供一种能以简易的方式编译、处理低级存储器、产生少量的机器码以及不需要任何运行环境支持便能运行的编程语言。

    85 引用 • 165 回帖 • 1 关注
  • Linux

    Linux 是一套免费使用和自由传播的类 Unix 操作系统,是一个基于 POSIX 和 Unix 的多用户、多任务、支持多线程和多 CPU 的操作系统。它能运行主要的 Unix 工具软件、应用程序和网络协议,并支持 32 位和 64 位硬件。Linux 继承了 Unix 以网络为核心的设计思想,是一个性能稳定的多用户网络操作系统。

    943 引用 • 943 回帖
  • 百度

    百度(Nasdaq:BIDU)是全球最大的中文搜索引擎、最大的中文网站。2000 年 1 月由李彦宏创立于北京中关村,致力于向人们提供“简单,可依赖”的信息获取方式。“百度”二字源于中国宋朝词人辛弃疾的《青玉案·元夕》词句“众里寻他千百度”,象征着百度对中文信息检索技术的执著追求。

    63 引用 • 785 回帖 • 175 关注
  • Netty

    Netty 是一个基于 NIO 的客户端-服务器编程框架,使用 Netty 可以让你快速、简单地开发出一个可维护、高性能的网络应用,例如实现了某种协议的客户、服务端应用。

    49 引用 • 33 回帖 • 22 关注
  • 深度学习

    深度学习(Deep Learning)是机器学习的分支,是一种试图使用包含复杂结构或由多重非线性变换构成的多个处理层对数据进行高层抽象的算法。

    53 引用 • 40 回帖 • 2 关注
  • 链滴

    链滴是一个记录生活的地方。

    记录生活,连接点滴

    153 引用 • 3783 回帖 • 1 关注
  • Thymeleaf

    Thymeleaf 是一款用于渲染 XML/XHTML/HTML5 内容的模板引擎。类似 Velocity、 FreeMarker 等,它也可以轻易的与 Spring 等 Web 框架进行集成作为 Web 应用的模板引擎。与其它模板引擎相比,Thymeleaf 最大的特点是能够直接在浏览器中打开并正确显示模板页面,而不需要启动整个 Web 应用。

    11 引用 • 19 回帖 • 354 关注
  • GitHub

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

    209 引用 • 2031 回帖 • 1 关注
  • CentOS

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

    238 引用 • 224 回帖
  • Love2D

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

    14 引用 • 53 回帖 • 531 关注
  • 游戏

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

    176 引用 • 815 回帖
  • Sublime

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

    10 引用 • 5 回帖
  • 互联网

    互联网(Internet),又称网际网络,或音译因特网、英特网。互联网始于 1969 年美国的阿帕网,是网络与网络之间所串连成的庞大网络,这些网络以一组通用的协议相连,形成逻辑上的单一巨大国际网络。

    98 引用 • 344 回帖
  • 工具

    子曰:“工欲善其事,必先利其器。”

    286 引用 • 729 回帖