Question

我觉得我错过了一些显而易见的东西，但只能看到它。

设置点击事件的触发器：

anchor.addEventListener("click", myClickEvent );

function myClickEvent() {
  this.preventDefault();  // fails
  return false;
}

然而，默认的onClick方法仍然会发生。

我可以在addEventListener的同时取消默认传播，还是有其他方法可以做到这一点。我无法在myClickEvent中使用.preventDefault（），因为此时该事件不可用。

为了清晰起见，请修改以下注释：即使myClickEvent返回false，也会发生标记的默认onClick。

Answer 1

从addEventListener注册的处理程序返回false不会执行任何操作。请参阅https://stackoverflow.com/a/1357151/227299和https://developer.mozilla.org/en-US/docs/Web/API/Event/preventDefault

推荐的方法是致电event.preventDefault()

function myClickEvent(e) {
  e.preventDefault()
}

来自HTML属性的处理程序仍然可以使用，但您不应该使用它，因为与return false相比，event.preventDefault()的含义并不清楚（不允许使用该链接） event.stopPropagation()（不要让事件冒出来）

Answer 2

element.addEventListener("click", myClickEvent );

function myClickEvent(event) {
  event.preventDefault();
  return false;
}

Answer 3

在名为preventDefault的全局范围内没有此类函数 - 您需要使用已传递给回调的事件。

另外请确保您将事件附加到可以点击的内容（表单，锚点，按钮等）可能可能阻止事件。

如果您将事件附加到子/父元素，则没有任何内容可以按预期工作。

Answer 4

几乎感谢Teemu的代码，但并不完全。

根据函数的调用方式而有所不同。看起来有一个隐藏的参数发送定义'this'的值，当没有参数调用时，自动事件对象作为第一个可见参数发送：

不带参数调用：

anchor.addEventListener("click", myClickEvent );

function myClickEvent(param1, param2) {
  // this = events parent element (<a>)
  // this.href = <a href=...>
  // param1 = event object
  // param2 = undefined
  oEvent = param1;
  oEvent.preventDefault();
}

然后用参数调用它：

anchor.addEventListener("click", function (oEvent) { myClickEvent(oEvent, myParameter); });

function myClickEvent(param1, param2) {
  // this = [object Window]
  // this.href = undefined
  // param1 = event object
  // param2 = myParameter
  oEvent = param1;
  oEvent.preventDefault();
}

请注意，当手动发送参数时，'this'的值会从事件父元素更改为'[object Window]'，从而导致this.href出错。

然而，preventDefault现在似乎可靠地工作了。

Javascript：停止onClick默认

4 个答案: