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

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

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

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

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

image.png

image.png

  • 思源笔记

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

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

    20156 引用 • 77717 回帖
  • Q&A

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

    7017 引用 • 31714 回帖 • 220 关注

相关帖子

被采纳的回答
  • 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 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 回复
    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 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
  • 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
请输入回帖内容 ...

推荐标签 标签

  • OAuth

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

    36 引用 • 103 回帖 • 16 关注
  • golang

    Go 语言是 Google 推出的一种全新的编程语言,可以在不损失应用程序性能的情况下降低代码的复杂性。谷歌首席软件工程师罗布派克(Rob Pike)说:我们之所以开发 Go,是因为过去 10 多年间软件开发的难度令人沮丧。Go 是谷歌 2009 发布的第二款编程语言。

    495 引用 • 1386 回帖 • 329 关注
  • 人工智能

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

    77 引用 • 159 回帖
  • OpenStack

    OpenStack 是一个云操作系统,通过数据中心可控制大型的计算、存储、网络等资源池。所有的管理通过前端界面管理员就可以完成,同样也可以通过 Web 接口让最终用户部署资源。

    10 引用 • 5 关注
  • BND

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

    107 引用 • 1281 回帖 • 29 关注
  • Facebook

    Facebook 是一个联系朋友的社交工具。大家可以通过它和朋友、同事、同学以及周围的人保持互动交流,分享无限上传的图片,发布链接和视频,更可以增进对朋友的了解。

    4 引用 • 15 回帖 • 458 关注
  • SQLite

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

    4 引用 • 7 回帖
  • QQ

    1999 年 2 月腾讯正式推出“腾讯 QQ”,在线用户由 1999 年的 2 人(马化腾和张志东)到现在已经发展到上亿用户了,在线人数超过一亿,是目前使用最广泛的聊天软件之一。

    45 引用 • 557 回帖 • 160 关注
  • 反馈

    Communication channel for makers and users.

    124 引用 • 907 回帖 • 223 关注
  • Redis

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

    284 引用 • 248 回帖 • 123 关注
  • Sublime

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

    10 引用 • 5 回帖
  • WiFiDog

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

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

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

    4 引用 • 3 回帖 • 16 关注
  • 倾城之链
    23 引用 • 66 回帖 • 121 关注
  • 京东

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

    14 引用 • 102 回帖 • 403 关注
  • iOS

    iOS 是由苹果公司开发的移动操作系统,最早于 2007 年 1 月 9 日的 Macworld 大会上公布这个系统,最初是设计给 iPhone 使用的,后来陆续套用到 iPod touch、iPad 以及 Apple TV 等产品上。iOS 与苹果的 Mac OS X 操作系统一样,属于类 Unix 的商业操作系统。

    84 引用 • 139 回帖 • 1 关注
  • PHP

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

    165 引用 • 407 回帖 • 509 关注
  • jQuery

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

    63 引用 • 134 回帖 • 724 关注
  • 单点登录

    单点登录(Single Sign On)是目前比较流行的企业业务整合的解决方案之一。SSO 的定义是在多个应用系统中,用户只需要登录一次就可以访问所有相互信任的应用系统。

    9 引用 • 25 回帖 • 2 关注
  • Markdown

    Markdown 是一种轻量级标记语言,用户可使用纯文本编辑器来排版文档,最终通过 Markdown 引擎将文档转换为所需格式(比如 HTML、PDF 等)。

    165 引用 • 1474 回帖
  • Ant-Design

    Ant Design 是服务于企业级产品的设计体系,基于确定和自然的设计价值观上的模块化解决方案,让设计者和开发者专注于更好的用户体验。

    17 引用 • 23 回帖 • 3 关注
  • CloudFoundry

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

    5 引用 • 18 回帖 • 149 关注
  • 酷鸟浏览器

    安全 · 稳定 · 快速
    为跨境从业人员提供专业的跨境浏览器

    3 引用 • 59 回帖 • 23 关注
  • InfluxDB

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

    2 引用 • 55 关注
  • 服务器

    服务器,也称伺服器,是提供计算服务的设备。由于服务器需要响应服务请求,并进行处理,因此一般来说服务器应具备承担服务并且保障服务的能力。

    124 引用 • 580 回帖
  • 996
    13 引用 • 200 回帖 • 6 关注
  • Latke

    Latke 是一款以 JSON 为主的 Java Web 框架。

    70 引用 • 533 回帖 • 735 关注