返回 false 并且 e.preventDefault() 不起作用

Question

我正在阅读有关 Javascript 的文章。

我创建了一个小例子：

html：

<a id="href1" href="https://www.google.ru/">1</a>
<a id="href2" href="https://www.google.ru/">2</a>

js：

 href1.onClick = function () {
    alert("href1");
    return false;
}
href2.addEventListener = ("click", function (e) {
    alert("href2");
    e.preventDefault();
})

我预计我会看到警报并且不会执行重定向。 在我的本地 PC 上，我没有看到警报，但会发生重定向。
我做错了什么？

https://jsfiddle.net/hr1cbu2j/

Answer 1

您的第一个示例使用onClick ，但应该使用onclick 。 JavaScript 和 DOM 区分大小写。 但我不会使用onclick 。

你的第二个例子应该是：

href2.addEventListener("click", function (e) {
    e.preventDefault();
    alert("href2");
}, false);

1. 语法很差，应该在 Web 控制台中给你一个错误。

2. 偏执狂告诉我在显示alert之前阻止默认设置，因为alert是一个非常奇怪的东西，并且在某些浏览器（如 Firefox）上有奇怪的行为。

---

旁注：我强烈建议不要依赖通过提供元素id创建的自动全局变量。 是的，它是（现在）指定的行为，但全局命名空间太拥挤了，冲突很容易发生，也很难诊断。 使用document.getElementById代替：

document.getElementById("href2").addEventListener(...

Answer 2

像这样使用addEventListener ：

var href2 = document.getElementById('href2');

href2.addEventListener("click", function (e) {
    e.preventDefault();
    alert("href2");
});