Comments (4)
是的,从功能上说是这样没错。但是实现上可能比较有难度,因为动态那个弹出框的判断是B站的逻辑,然后你进入信息卡片的时候可能就判断出那个框了。
from biliscope.
是的,从功能上说是这样没错。但是实现上可能比较有难度,因为动态那个弹出框的判断是B站的逻辑,然后你进入信息卡片的时候可能就判断出那个框了。
解决方案
只完成了阻止弹出框收回,在弹出框外触发弹出框的 mouseleave
事件还是个问题。
let stopPropagation = ev => {ev.stopPropagation();}; // 阻止事件传播的函数
let dynamicPopup = document.querySelectorAll(".right-entry .v-popover-wrap")[3] // 找到动态弹出框的位置
dynamicPopup.addEventListener("mouseleave", stopPropagation, true) // 增加阻止弹出框触发 "mouseleave" 的事件
dynamicPopup.removeEventListener("mouseleave", stopPropagation, true) // 恢复弹出框的 "mouseleave" 事件
待解决的问题
如果离开 biliscope
卡片时在弹出框的外面,那就无法触发弹出框的 mouseleave
事件,导致弹出框无法收回。需要再用鼠标进去弹出框再出来才能触发收回,影响了用户体验。
待讨论的想法
我觉得可以在找到的 v-popover-wrap
里用绝对定位增加一个比 biliscope
卡片大一点的遮罩,那就可以正常触发弹出框的 mouseleave
事件了。
from biliscope.
是的,从功能上说是这样没错。但是实现上可能比较有难度,因为动态那个弹出框的判断是B站的逻辑,然后你进入信息卡片的时候可能就判断出那个框了。
解决方案
只完成了阻止弹出框收回,在弹出框外触发弹出框的
mouseleave
事件还是个问题。let stopPropagation = ev => {ev.stopPropagation();}; // 阻止事件传播的事件 let dynamicPopup = document.querySelectorAll(".right-entry .v-popover-wrap")[3] // 找到动态弹出框的位置 dynamicPopup.addEventListener("mouseleave", stopPropagation, true) // 增加阻止弹出框触发 "mouseleave" 的事件 dynamicPopup.removeEventListener("mouseleave", stopPropagation, true) // 恢复弹出框的 "mouseleave" 事件待解决的问题
如果离开
biliscope
卡片时在弹出框的外面,那就无法触发弹出框的mouseleave
事件,导致弹出框无法收回。需要再用鼠标进去弹出框再出来才能触发收回,影响了用户体验。待讨论的想法
我觉得可以在找到的
v-popover-wrap
里用绝对定位增加一个比biliscope
卡片大一点的遮罩,那就可以正常触发弹出框的mouseleave
事件了。
如果可以直接删除v-popover
的mouseleave
事件,会简单很多,在DevTool里手动删掉,popup确实就不关闭了
查了一下,chrome extension提供了chrome.debugger 和 DOMDebugger.getEventListeners, 可以获取到DOM的EventListeners
另一种获取EventListener
的方式是修改DOM的prototype
,把Listener缓存下来,不过需要在bilibili页面加载前执行
https://stackoverflow.com/a/6434924/14124032
from biliscope.
查了一下,chrome extension提供了chrome.debugger 和 DOMDebugger.getEventListeners, 可以获取到DOM的
EventListeners
getEventListeners
这个函数,浏览器扩展是用不了的,因为它只能在浏览器的控制台(devtools)里使用。
另一种获取
EventListener
的方式是修改DOM的prototype
,把Listener缓存下来,不过需要在bilibili页面加载前执行 https://stackoverflow.com/a/6434924/14124032
在 b 站页面加载之前, 目标 DOM 元素都不存在,怎么缓存 Listener
?这个方案看起来不可行。
感觉最好的方式还是我写的这三行代码,可以实现动态阻止事件运行。
let stopPropagation = ev => {ev.stopPropagation();}; // 阻止事件传播的函数
let dynamicPopup = document.querySelectorAll(".right-entry .v-popover-wrap")[3] // 找到动态弹出框的位置
dynamicPopup.addEventListener("mouseleave", stopPropagation, true) // 增加阻止弹出框触发 "mouseleave" 的事件
from biliscope.
Related Issues (20)
- 希望增加的功能 HOT 9
- [FR] 增加关闭 up 主卡片的选项
- [FR] 为视频AI总结添加快捷键支持 HOT 5
- [FR] 在options里增加”反馈BUG“选项 HOT 1
- [FR] 增加评论历史记录和弹幕历史记录 HOT 2
- [FR] 增加收藏评论的功能 HOT 1
- [FIX] AI conclusion card could cover `view latter` button HOT 4
- 大大,好人做到底...写一个油管总结吧...油管那个怪怪的 HOT 1
- [bug report]搜索页搜索标签无法显示 HOT 2
- 关注后不会切换关注状态 HOT 1
- BUG: 有些视频无法显示AI总结(插件无法实现,但B站自带的按扭可以) HOT 1
- 增加依据标签实现动态视频过滤的功能 HOT 3
- 希望增加修改备注字体、颜色的功能 HOT 1
- 希望增加的功能:使用开源大模型扩展视频内容 HOT 4
- [BUG] 置顶评论中含有 av 号的 jump_url 时,会被标识为广告。 HOT 2
- 能不能有更新日志,现在哪个版本更新了什么我都不知道,还是自动更新的,都不知道啥时候更新的蹦出来新内容 HOT 5
- [BUG] 动态下,视频标签出现在头像位置
- [Feature Request] 请求在卡片上增加一个拉黑按钮,最好可以订阅黑名单列表 HOT 8
- [Bug] 含B站短链的广告无法识别 HOT 2
- [FR] 显示评论区的IP属地 HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from biliscope.