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

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

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

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

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

image.png

image.png

  • 思源笔记

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

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

    26302 引用 • 109352 回帖
  • Q&A

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

    10114 引用 • 45943 回帖 • 63 关注

相关帖子

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

推荐标签 标签

  • Vditor

    Vditor 是一款浏览器端的 Markdown 编辑器,支持所见即所得、即时渲染(类似 Typora)和分屏预览模式。它使用 TypeScript 实现,支持原生 JavaScript、Vue、React 和 Angular。

    373 引用 • 1858 回帖 • 1 关注
  • abitmean

    有点意思就行了

    35 关注
  • 安全

    安全永远都不是一个小问题。

    199 引用 • 818 回帖 • 1 关注
  • Sillot

    Insights(注意当前设置 master 为默认分支)

    汐洛彖夲肜矩阵(Sillot T☳Converbenk Matrix),致力于服务智慧新彖乄,具有彖乄驱动、极致优雅、开发者友好的特点。其中汐洛绞架(Sillot-Gibbet)基于自思源笔记(siyuan-note),前身是思源笔记汐洛版(更早是思源笔记汐洛分支),是智慧新录乄终端(多端融合,移动端优先)。

    主仓库地址:Hi-Windom/Sillot

    文档地址:sillot.db.sc.cn

    注意事项:

    1. ⚠️ 汐洛仍在早期开发阶段,尚不稳定
    2. ⚠️ 汐洛并非面向普通用户设计,使用前请了解风险
    3. ⚠️ 汐洛绞架基于思源笔记,开发者尽最大努力与思源笔记保持兼容,但无法实现 100% 兼容
    29 引用 • 25 回帖 • 133 关注
  • 运维

    互联网运维工作,以服务为中心,以稳定、安全、高效为三个基本点,确保公司的互联网业务能够 7×24 小时为用户提供高质量的服务。

    151 引用 • 257 回帖
  • FlowUs

    FlowUs.息流 个人及团队的新一代生产力工具。

    让复杂的信息管理更轻松、自由、充满创意。

    1 引用 • 2 关注
  • Openfire

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

    6 引用 • 7 回帖 • 121 关注
  • 机器学习

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

    77 引用 • 37 回帖
  • 七牛云

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

    29 引用 • 230 回帖 • 122 关注
  • JSON

    JSON (JavaScript Object Notation)是一种轻量级的数据交换格式。易于人类阅读和编写。同时也易于机器解析和生成。

    53 引用 • 190 回帖 • 3 关注
  • Unity

    Unity 是由 Unity Technologies 开发的一个让开发者可以轻松创建诸如 2D、3D 多平台的综合型游戏开发工具,是一个全面整合的专业游戏引擎。

    25 引用 • 7 回帖 • 118 关注
  • ngrok

    ngrok 是一个反向代理,通过在公共的端点和本地运行的 Web 服务器之间建立一个安全的通道。

    7 引用 • 63 回帖 • 656 关注
  • Kafka

    Kafka 是一种高吞吐量的分布式发布订阅消息系统,它可以处理消费者规模的网站中的所有动作流数据。 这种动作(网页浏览,搜索和其他用户的行动)是现代系统中许多功能的基础。 这些数据通常是由于吞吐量的要求而通过处理日志和日志聚合来解决。

    36 引用 • 35 回帖 • 3 关注
  • ZooKeeper

    ZooKeeper 是一个分布式的,开放源码的分布式应用程序协调服务,是 Google 的 Chubby 一个开源的实现,是 Hadoop 和 HBase 的重要组件。它是一个为分布式应用提供一致性服务的软件,提供的功能包括:配置维护、域名服务、分布式同步、组服务等。

    61 引用 • 29 回帖 • 12 关注
  • TextBundle

    TextBundle 文件格式旨在应用程序之间交换 Markdown 或 Fountain 之类的纯文本文件时,提供更无缝的用户体验。

    1 引用 • 2 回帖 • 82 关注
  • 链滴

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

    记录生活,连接点滴

    182 引用 • 3882 回帖
  • CodeMirror
    2 引用 • 17 回帖 • 173 关注
  • Love2D

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

    14 引用 • 53 回帖 • 564 关注
  • Facebook

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

    4 引用 • 15 回帖 • 443 关注
  • jsDelivr

    jsDelivr 是一个开源的 CDN 服务,可为 npm 包、GitHub 仓库提供免费、快速并且可靠的全球 CDN 加速服务。

    5 引用 • 31 回帖 • 110 关注
  • 思源笔记

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

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

    26302 引用 • 109352 回帖
  • 浅吟主题

    Jeffrey Chen 制作的思源笔记主题,项目仓库:https://github.com/TCOTC/Whisper

    1 引用 • 31 回帖
  • 大疆创新

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

    2 引用 • 14 回帖
  • 区块链

    区块链是分布式数据存储、点对点传输、共识机制、加密算法等计算机技术的新型应用模式。所谓共识机制是区块链系统中实现不同节点之间建立信任、获取权益的数学算法 。

    92 引用 • 752 回帖 • 2 关注
  • CentOS

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

    240 引用 • 224 回帖
  • JavaScript

    JavaScript 一种动态类型、弱类型、基于原型的直译式脚本语言,内置支持类型。它的解释器被称为 JavaScript 引擎,为浏览器的一部分,广泛用于客户端的脚本语言,最早是在 HTML 网页上使用,用来给 HTML 网页增加动态功能。

    730 引用 • 1282 回帖
  • Telegram

    Telegram 是一个非盈利性、基于云端的即时消息服务。它提供了支持各大操作系统平台的开源的客户端,也提供了很多强大的 APIs 给开发者创建自己的客户端和机器人。

    5 引用 • 35 回帖