Closed eligarfzzz closed 3 months ago
是的,从功能上说是这样没错。但是实现上可能比较有难度,因为动态那个弹出框的判断是B站的逻辑,然后你进入信息卡片的时候可能就判断出那个框了。
是的,从功能上说是这样没错。但是实现上可能比较有难度,因为动态那个弹出框的判断是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
事件了。
是的,从功能上说是这样没错。但是实现上可能比较有难度,因为动态那个弹出框的判断是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
查了一下,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" 的事件
https://github.com/gaogaotiantian/biliscope/assets/71590040/8c292244-2af1-4b57-8bf9-be5b7a8c45c8
从用户体验上说,鼠标进入信息卡片时保持动态窗口打开可能更合理