如何使用Chrome扩展程序（内容脚本）覆盖拖动事件侦听器？
czphilip
我正在构建一个Chrome扩展程序，它将为Trello添加其他功能。
我面临的问题是Trello某种程度上禁用了html5拖放，因此当我拖动具有属性draggable="true"的某些DOM（我用扩展名注入）时，不会出现可拖动元素的半透明表示。
..
（拖动红色框，它<div draggable="true" style="..."></div>不会显示半透明图像）
..
通过使用Chrome DevTool检查页面，我看到有一个dragstart设置为的事件监听器document。
..
If I remove the dragstart event listener (by clicking the "Remove" button next to it inside the DevTool's Event Listeners window) then the drag works correctly as shown in the screenshot below. (The red box on the right is the translucent representation created by the html5 drag mechanism).
..
So my question is: is there any way to override that dragstart event listener with a chrome extension for the elements that I intend to make draggable?
P.S. I am plaining to use react DnD eventually which is based on the html5 drag mechanism. And apparently, I am using react to build my extension :)
..
Edited: Here are the code from Trello where the dragstart event listener is attached.
n(document).bind("dragstart", function(e) {
return n(e.target).closest(".ui-draggable, .js-draggable").length > 0
}),
The above code is placed within n(document).ready(function() { /* HERE */ } and n = e("jquery"). (Not 100% sure but seems that n is just jQuery.)
Since the event listener is attached anonymously, it is not possible to remove it afterwards (Correct me if I am wrong).
Xan
To begin with, a reminder: JavaScript defined in the page lives in a separate JS context from content scripts (the "isolated world" principle). Read up on that if unfamiliar.
With that in mind, you have two potential approaches:
You can be the fastest gun in the West and attach your listener first, before any of the page's code has a chance to execute, with a
run_at: "document_start"content script. From there, you can cancel event propagation so that the page's listener won't receive it.您可以通过注入页面上下文来自己删除侦听器。当然，如何删除它取决于它的连接方式。
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
编辑于
相关文章
Related 相关文章
- 1
使用 Adobe 扩展脚本将事件侦听器附加到应用程序项目中
- 2
如何取消Chrome扩展程序内容脚本中的事件绑定？
- 3
使用进度事件侦听器覆盖主干同步
- 4
使用OnClick =或脚本附加事件侦听器
- 5
使用鼠标侦听器拖动对象
- 6
使用鼠标侦听器拖动对象
- 7
使用事件侦听器克隆引导程序元素
- 8
JavaFX事件/侦听器/处理程序
- 9
将拖动事件侦听器添加到iframe
- 10
如何在Chrome扩展程序中的后台消息侦听器中检索活动选项卡？
- 11
如何删除在TypeScript中使用“ this”的事件侦听器？
- 12
如何使用jquery .each（）添加单个事件侦听器？
- 13
如何使用 for 循环删除多个事件侦听器？
- 14
如何简化 javascript 事件侦听器？
- 15
Chrome扩展程序后台消息侦听器启动两次
- 16
覆盖<input>元素的Bootstrap Material Design事件侦听器
- 17
覆盖<input>元素的Bootstrap Material Design事件侦听器
- 18
覆盖小部件的单击事件侦听器 - Appcelerator Titanium
- 19
如何在Rails 4.1应用程序中将基于事件的文件系统侦听器与Spring一起使用
- 20
如何将对象的事件侦听器注册到其类之外的事件处理程序？
- 21
绘图透明区域未使用拖动侦听器更新
- 22
如何为SubTpl内容后的组合框配置单击事件侦听器
- 23
如何在聚合物中的内容元素上设置单击事件侦听器？
- 24
如何为页面脚本中的自定义消息创建事件侦听器
- 25
如何在Java脚本中删除“ mouseup”事件侦听器
- 26
如何在<head>中的脚本标记中触发事件侦听器
- 27
如何在Java脚本中删除“ mouseup”事件侦听器
- 28
如何为页面脚本中的自定义消息创建事件侦听器
- 29
如何添加由脚本创建的每个按钮点击侦听器事件？
我来说两句