在 Firefox 插件弹出窗口中禁用任何对象的拖动
Posted
技术标签:
【中文标题】在 Firefox 插件弹出窗口中禁用任何对象的拖动【英文标题】：Disable drag for any object in firefox addon popup 【发布时间】：2016-12-18 20:00:55 【问题描述】：我正在 Chrome / Firefox 上开发一个扩展，它有一个由不同图形元素组成的弹出窗口。我不希望用户从此弹出窗口中拖放这些项目。要在 Chrome 中禁用拖动，我可以使用这个 css 代码：
*
user-drag: none;
-ms-user-drag: none;
-moz-user-drag: none;
-webkit-user-drag: none;
user-select: none;
-ms-user-select: none;
-moz-user-select: none;
-webkit-user-select: none;
text-decoration: none;
但这在 Firefox 中不起作用。是否有任何 css 属性可以在这种情况下工作？
这是一个最小版本：https://drive.google.com/open?id=0B4k6nM18722gNjY5VjVpREhpRTQ
【问题讨论】：
【参考方案1】：通过蛮力禁用拖动：
要禁用对整个弹出窗口/文档的拖动，您可以执行以下任一操作：
将以下行添加到您的 popup.js 文件中：function noDrag(event)
event.preventDefault();
document.addEventListener('dragstart',noDrag,true);
document.addEventListener('dragstart',function(event)event.preventDefault();,true);
<html> 行更改为：
<html ondragstart='event.preventDefault();'>
我个人的偏好是使用命名为noDrag 的函数。命名函数而不是闭包仅仅是因为在将来的某个时候，我可能想要选择哪些元素已禁用拖动。如果需要，命名它允许重复使用相同的函数，或者将其作为侦听器从元素中删除。 javascript 而不是 HTML，因为 A）您已经有一个用于弹出窗口的 JavaSctipt 文件和 B）我对 onxxxxx 事件属性/属性的看法是，在合理的情况下应该避免使用它们。如果还没有与此弹出窗口关联的 JavaScript 文件，我将使用 HTML ondragstart 方法。
应该如何工作：
以下内容不会禁用对 <a> 和 <img> 元素的拖动。规范和文档说它应该可以禁用拖动。我需要进一步深入研究 Firefox 源代码，以找出它不起作用的原因。
在 Firefox（和 HTML 规范）中，可拖动元素由 draggable attribute 控制。对于图像和链接，默认值为true。对于其他所有内容，默认值为false。您需要在 HTML 中的所有此类元素上使用 draggable="false"，或者在所有此类元素上使用 JavaScript 到 setAttribute('draggable',false) 或 element.draggable = false;。
Firefox 没有可用于控制元素是否可拖动的 CSS 属性。
欲了解更多信息，请参阅：
Preventing an image from being draggable or selectable without using JS draggable Drag Operations HTML Drag and Drop API WHATWG HTML Living Standard (The definition ofdraggable in that specification.)
HTML5.2 (The definition of 'draggable' in that specification.)
【讨论】：
draggable 属性似乎不适用于弹出窗口中的扩展。无论我在 JS 或 HTML 中使用它，元素仍然是可拖动的。 @Nucktrooper，请提供minimal reproducible example 的扩展程序，打开您遇到此类问题的面板，以便我们复制问题。 问题中添加了最小版本。 @Nucktrooper，感谢MCVE。我已经使用经过测试且有效的蛮力方法更新了答案，以禁用对整个弹出窗口的拖动。以上是关于在 Firefox 插件弹出窗口中禁用任何对象的拖动的主要内容，如果未能解决你的问题，请参考以下文章
如何禁用显示 Adobe Flash Player 未更新的弹出窗口？
Jquery Ui Datepicker 月/年下拉菜单在最新的 Firefox 中的弹出窗口中不起作用