.ondragstart不等同于.addEventListener("dragstart")

Question

我希望将一个img元素设置为不可选和不可拖动，因为我将其用作窗口调整控件（单击并拖动周围的div可以调整窗口大小）。

以下代码可以完美实现此功能：

noSelect[x].ondragstart = function() {return false};

但是由于这将用于一个在每个HTMLElement周围使用XPCNativeWrapper的Firefox（3.6.*）扩展程序中，我不能使用“.onsdragstart”，而必须使用“.addEventListener”。

问题在于上面代码的等效代码无法正常工作。点击和拖动img会触发Firefox的默认图像拖动，而不是在以下情况下调整窗口大小：

noSelect[x].addEventListener("dragstart", function () {return false}, false)

上面引用的两行代码不等同吗？

未选对象的完整上下文：

var noSelect = document.getElementsByClassName("noSelect")
    for (x in noSelect) {
        if (x == "length")
            break
        noSelect[x].unselectable = "on";
        noSelect[x].onselectstart = function(){return false};
        noSelect[x].ondragstart = function() {return false};
        noSelect[x].style.userSelect = "none"; // w3c standard
        noSelect[x].style.MozUserSelect = "none"; // Firefox
    }

- TinyTimZamboni

Answer 1

addEventListener注册一个 EventListener，它没有任何特殊的返回代码处理。

从大多数on*事件处理程序返回false根据HTML规范取消事件，在常规的EventListener中，这是通过调用event.preventDefault()来实现的，正如Neil在他的答案中提到的那样。

- Nickolay

---

这是我想要接受的答案，但这个项目是一段时间以前的，我想先回去验证一下。 - TinyTimZamboni

Answer 2

我不知道为什么function() { return false; }无法工作，但我知道在Firefox中function(event) { event.preventDefault(); }会起作用。

- Neil

Answer 3

1. ondragstart是IE专有事件，这就是为什么它在Firefox中不会触发。 更新：情况比这更复杂，请在此处阅读更多信息：Javascript ondrag, ondragstart, ondragend
2. 如果在FF中可用ondragstart，则可以使用x.ondragstart = ...来捕获它，它也适用于FF。
3. addEventListener只是一种更好的分配事件处理程序的方式，它允许您将多个处理程序附加到元素的事件上。 IE有一个类似的东西叫做attachEvent。

关于您的问题：在非IE浏览器中，要使对象无法选择，您必须捕获onmousedown事件并防止默认行为。

- kapa

---

1. 事件在两种情况下都会触发。我在函数中加入了一个警报，它就会触发。
2. 根据http://help.dottoro.com/ljpncnwi.php，在FF中可用ondragstart。但由于XDCNativeWrapper，我无法使用x.ondragstart=。
3. 如果addEventListener只是更好的话，为什么用addEventListener替换“.ondragstart”会表现出不同的行为？它仍然会触发，但不像.ondragstart那样覆盖FF的默认拖动。

- TinyTimZamboni

默认行为可以通过捕获mousedown事件来停止。 - kapa

Answer 4

image.addEventListener('dragstart'，（e）=> e.preventDefault()）

- Bobur

---

虽然这段代码可能解决了问题，但附上解释关于如何以及为什么解决该问题将有助于提高您的帖子质量。请记住，您正在回答未来读者的问题，而不仅仅是现在提问的人。请[编辑]您的答案以添加解释，并指出适用的限制和假设。 - Cristik

你能提供更多细节吗？ - Lal krishnan S L

你的回答目前不够明确，请进行 [编辑] 并添加更多详细信息以帮助其他人了解它如何回答所提出的问题。您可以在 帮助中心 中找到有关编写良好答案的更多信息。 - Community