重写Javascript中链接（'；a'；）对象的默认行为

我不知道我想要完成的事情是否可能。我想覆盖给定HTML页面的所有锚对象（

A

tag）的默认行为。我知道我可以遍历所有

A

元素，并通过body元素

onload

方法动态地向每个元素添加

onclick

调用，但我正在寻找一个更绝对的解决方案。我需要的是为所有

A

元素分配一个

onclick

操作，该操作调用一个将元素

href

属性作为参数传递的方法，因此如下所示：

<a href="http://domain.tld/page.html">

动态地变成：

<a href="http://domain.tld/page.html" onclick="someMethodName('http://domain.tld/page.html'); return false;">

正如我所说，实现这一点的理想方法是在加载文档时以某种方式完全重写锚点类。如果不可能，那么我将求助于通过all

A

elements方法的循环（我已经知道怎么做了）

---

这是最简单的方法。将

…

包装到文档头中，它将在页面加载时运行。

如果不想迭代所有锚元素，可以简单地使用，例如：

document.onclick = function (e) {
  e = e ||  window.event;
  var element = e.target || e.srcElement;

  if (element.tagName == 'A') {
    someFunction(element.href);
    return false; // prevent default action and stop event propagation
  }
};

---

检查上面的示例。

无法覆盖所有锚元素onlick事件。您可以向文档体添加onclick，并使用逻辑查看是否从锚元素向上传播，并在这种情况下执行该事件，但如果您的页面很复杂，并且在某些情况下不传播单击，则此解决方案可能会导致问题

如果可行的话，我会坚持使用getElementsByTagName解决方案

使用jQuery：

$(function() {
    $("a").click(function() {
        return someMethodName($(this).attr('href'));
    });
});

function someMethodName(href)
{
    console.log(href);
    return false;
}

---

CMS的解决方案是最好的解决方案。请务必注意，如果引用需要从基本锚点/元素上设置的protype属性中存储的字符串或锚点/元素上声明的属性中运行的函数或检查，则可以获得更好的性能。通过使用此属性，可以找到要调用的函数，并从一个决策分支调用该函数，而不是针对每种可能性编写一个新的决策分支。如果您在一个或两个以上的案例中打断或使用案例语句，您应该开始考虑这一点，今天可能是发现控制反转和编码注入风格的好日子

同样，如果需要处理多个事件，请不要使用案例。使用字符串组合来构造需要调用的函数的路径。这需要在“a”元素中添加一个原型，该元素定义要组成的默认值和字符串。元素上的数据属性应该能够覆盖默认值。本质上，我们只希望在默认情况下传递一条消息和一个操作，并在标记中进行反向更改。指定的操作应该作为API或其他可访问的库函数发布在某处，并且可以由lib['funName']调用。只需给它一个属性，不必担心名称或id。原型和属性对于debounce是有用的，因为你必须去Bounce

---

有一些人在客户端路由器上工作，试图完善这一点。

与Benji XVI的答案类似，但使用

querySelectorAll

，例如在一个容器div中使用“container”类并使用es6

const $elems = document.querySelectorAll('.container a')
var elems = Array.from($elems)
elems.map(a => {
  a.onclick = (e) => {
    e.preventDefault()
    window.alert('Clicking external links is disabled')
  }
})

---

好吧，有了活动授权，他们不必都把活动强加在自己身上。例如，请参见jQuery中的“Live”。或者阅读有关JavaScript事件委派的内容。通常，这应该在HTML进入客户端之前对其执行。如果你的页面很复杂，你可能会遇到很多带有事件委派的程序。实际上，对于“点击”事件，我希望委派的问题会少一些。跟踪鼠标之类的事情会杀了你。看看这个关于jQuery的“Live”。。。问题明确提到不要迭代锚元素。@Benji XVI:此方法的优点之一是，如果在绑定此事件后以编程方式添加更多锚元素（即：使用Ajax加载的内容），它将继续对这些新锚元素起作用。与往常一样，最好的答案是“这取决于”如果您有很多很多项，所有这些项都打算运行基本相同的代码，那么委托就很好了。如果你要进入一个switch语句，并为每个id列出一个不同的操作列表，那么就很糟糕了。CMS：谢谢，你的方法工作得很好，它很短，很好，就像你在一条评论中说的，它满足了应用于所有“a”元素的目的，不仅仅是页面最初呈现时就在页面上的标签，其目标是允许通过AJAX加载的内容中的新“A”标签继续工作。干得好！当标记中有DOM元素（例如图像，这是一种非常常见的情况）时，这个答案不起作用。要解决这个问题，您必须查看

e.path

字段，并在祖先中查找

nodeName==='A'

。

const $elems = document.querySelectorAll('.container a')
var elems = Array.from($elems)
elems.map(a => {
  a.onclick = (e) => {
    e.preventDefault()
    window.alert('Clicking external links is disabled')
  }
})