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

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

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

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

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

image.png

image.png

  • 思源笔记

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

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

    22341 引用 • 89393 回帖 • 1 关注
  • Q&A

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

    8113 引用 • 37006 回帖 • 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);
        }
    })();
    
    
    

欢迎来到这里!

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

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

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

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

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

    1 回复
  • 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
  • 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
  • 查看全部回帖

推荐标签 标签

  • 30Seconds

    📙 前端知识精选集,包含 HTML、CSS、JavaScript、React、Node、安全等方面,每天仅需 30 秒。

    • 精选常见面试题,帮助您准备下一次面试
    • 精选常见交互,帮助您拥有简洁酷炫的站点
    • 精选有用的 React 片段,帮助你获取最佳实践
    • 精选常见代码集,帮助您提高打码效率
    • 整理前端界的最新资讯,邀您一同探索新世界
    488 引用 • 384 回帖 • 8 关注
  • CSDN

    CSDN (Chinese Software Developer Network) 创立于 1999 年,是中国的 IT 社区和服务平台,为中国的软件开发者和 IT 从业者提供知识传播、职业发展、软件开发等全生命周期服务,满足他们在职业发展中学习及共享知识和信息、建立职业发展社交圈、通过软件开发实现技术商业化等刚性需求。

    14 引用 • 155 回帖
  • PWL

    组织简介

    用爱发电 (Programming With Love) 是一个以开源精神为核心的民间开源爱好者技术组织,“用爱发电”象征开源与贡献精神,加入组织,代表你将遵守组织的“个人开源爱好者”的各项条款。申请加入:用爱发电组织邀请帖
    用爱发电组织官网:https://programmingwithlove.stackoverflow.wiki/

    用爱发电组织的核心驱动力:

    • 遵守开源守则,体现开源&贡献精神:以分享为目的,拒绝非法牟利。
    • 自我保护:使用适当的 License 保护自己的原创作品。
    • 尊重他人:不以各种理由、各种漏洞进行未经允许的抄袭、散播、洩露;以礼相待,尊重所有对社区做出贡献的开发者;通过他人的分享习得知识,要留下足迹,表示感谢。
    • 热爱编程、热爱学习:加入组织,热爱编程是首当其要的。我们欢迎热爱讨论、分享、提问的朋友,也同样欢迎默默成就的朋友。
    • 倾听:正确并恳切对待、处理问题与建议,及时修复开源项目的 Bug ,及时与反馈者沟通。不抬杠、不无视、不辱骂。
    • 平视:不诋毁、轻视、嘲讽其他开发者,主动提出建议、施以帮助,以和谐为本。只要他人肯努力,你也可能会被昔日小看的人所超越,所以请保持谦虚。
    • 乐观且活跃:你的努力决定了你的高度。不要放弃,多年后回头俯瞰,才会发现自己已经成就往日所仰望的水平。积极地将项目开源,帮助他人学习、改进,自己也会获得相应的提升、成就与成就感。
    1 引用 • 487 回帖
  • Spark

    Spark 是 UC Berkeley AMP lab 所开源的类 Hadoop MapReduce 的通用并行框架。Spark 拥有 Hadoop MapReduce 所具有的优点;但不同于 MapReduce 的是 Job 中间输出结果可以保存在内存中,从而不再需要读写 HDFS,因此 Spark 能更好地适用于数据挖掘与机器学习等需要迭代的 MapReduce 的算法。

    74 引用 • 46 回帖 • 552 关注
  • abitmean

    有点意思就行了

    29 关注
  • 导航

    各种网址链接、内容导航。

    40 引用 • 173 回帖
  • CloudFoundry

    Cloud Foundry 是 VMware 推出的业界第一个开源 PaaS 云平台,它支持多种框架、语言、运行时环境、云平台及应用服务,使开发人员能够在几秒钟内进行应用程序的部署和扩展,无需担心任何基础架构的问题。

    5 引用 • 18 回帖 • 167 关注
  • 机器学习

    机器学习(Machine Learning)是一门多领域交叉学科,涉及概率论、统计学、逼近论、凸分析、算法复杂度理论等多门学科。专门研究计算机怎样模拟或实现人类的学习行为,以获取新的知识或技能,重新组织已有的知识结构使之不断改善自身的性能。

    83 引用 • 37 回帖
  • Git

    Git 是 Linux Torvalds 为了帮助管理 Linux 内核开发而开发的一个开放源码的版本控制软件。

    209 引用 • 358 回帖
  • Eclipse

    Eclipse 是一个开放源代码的、基于 Java 的可扩展开发平台。就其本身而言,它只是一个框架和一组服务,用于通过插件组件构建开发环境。

    75 引用 • 258 回帖 • 618 关注
  • jsoup

    jsoup 是一款 Java 的 HTML 解析器,可直接解析某个 URL 地址、HTML 文本内容。它提供了一套非常省力的 API,可通过 DOM,CSS 以及类似于 jQuery 的操作方法来取出和操作数据。

    6 引用 • 1 回帖 • 477 关注
  • WebClipper

    Web Clipper 是一款浏览器剪藏扩展,它可以帮助你把网页内容剪藏到本地。

    3 引用 • 9 回帖
  • jQuery

    jQuery 是一套跨浏览器的 JavaScript 库,强化 HTML 与 JavaScript 之间的操作。由 John Resig 在 2006 年 1 月的 BarCamp NYC 上释出第一个版本。全球约有 28% 的网站使用 jQuery,是非常受欢迎的 JavaScript 库。

    63 引用 • 134 回帖 • 724 关注
  • SQLite

    SQLite 是一个进程内的库,实现了自给自足的、无服务器的、零配置的、事务性的 SQL 数据库引擎。SQLite 是全世界使用最为广泛的数据库引擎。

    5 引用 • 7 回帖
  • 禅道

    禅道是一款国产的开源项目管理软件,她的核心管理思想基于敏捷方法 scrum,内置了产品管理和项目管理,同时又根据国内研发现状补充了测试管理、计划管理、发布管理、文档管理、事务管理等功能,在一个软件中就可以将软件研发中的需求、任务、bug、用例、计划、发布等要素有序的跟踪管理起来,完整地覆盖了项目管理的核心流程。

    6 引用 • 15 回帖 • 114 关注
  • 宕机

    宕机,多指一些网站、游戏、网络应用等服务器一种区别于正常运行的状态,也叫“Down 机”、“当机”或“死机”。宕机状态不仅仅是指服务器“挂掉了”、“死机了”状态,也包括服务器假死、停用、关闭等一些原因而导致出现的不能够正常运行的状态。

    13 引用 • 82 回帖 • 51 关注
  • 大数据

    大数据(big data)是指无法在一定时间范围内用常规软件工具进行捕捉、管理和处理的数据集合,是需要新处理模式才能具有更强的决策力、洞察发现力和流程优化能力的海量、高增长率和多样化的信息资产。

    93 引用 • 113 回帖
  • CAP

    CAP 指的是在一个分布式系统中, Consistency(一致性)、 Availability(可用性)、Partition tolerance(分区容错性),三者不可兼得。

    11 引用 • 5 回帖 • 607 关注
  • B3log

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

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

    FreeMarker 是一款好用且功能强大的 Java 模版引擎。

    23 引用 • 20 回帖 • 463 关注
  • ActiveMQ

    ActiveMQ 是 Apache 旗下的一款开源消息总线系统,它完整实现了 JMS 规范,是一个企业级的消息中间件。

    19 引用 • 13 回帖 • 672 关注
  • JWT

    JWT(JSON Web Token)是一种用于双方之间传递信息的简洁的、安全的表述性声明规范。JWT 作为一个开放的标准(RFC 7519),定义了一种简洁的,自包含的方法用于通信双方之间以 JSON 的形式安全的传递信息。

    20 引用 • 15 回帖 • 3 关注
  • LeetCode

    LeetCode(力扣)是一个全球极客挚爱的高质量技术成长平台,想要学习和提升专业能力从这里开始,充足技术干货等你来啃,轻松拿下 Dream Offer!

    209 引用 • 72 回帖
  • InfluxDB

    InfluxDB 是一个开源的没有外部依赖的时间序列数据库。适用于记录度量,事件及实时分析。

    2 引用 • 71 关注
  • OpenShift

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

    14 引用 • 20 回帖 • 633 关注
  • NetBeans

    NetBeans 是一个始于 1997 年的 Xelfi 计划,本身是捷克布拉格查理大学的数学及物理学院的学生计划。此计划延伸而成立了一家公司进而发展这个商用版本的 NetBeans IDE,直到 1999 年 Sun 买下此公司。Sun 于次年(2000 年)六月将 NetBeans IDE 开源,直到现在 NetBeans 的社群依然持续增长。

    78 引用 • 102 回帖 • 681 关注
  • JVM

    JVM(Java Virtual Machine)Java 虚拟机是一个微型操作系统,有自己的硬件构架体系,还有相应的指令系统。能够识别 Java 独特的 .class 文件(字节码),能够将这些文件中的信息读取出来,使得 Java 程序只需要生成 Java 虚拟机上的字节码后就能在不同操作系统平台上进行运行。

    180 引用 • 120 回帖