覆盖 Javascript 中链接 ('a') 对象的默认行为

Question

我不知道我想要完成的事情是否可能实现。我想覆盖给定 HTML 页面的所有锚点对象（A 标记）的默认行为。我知道我可以循环遍历所有 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;">

就像我所说的，执行此操作的理想方法是在文档加载时以某种方式完全覆盖 Anchor 类。如果不可能，那么我将诉诸循环遍历所有 A 元素的方法（我已经知道该怎么做）。

Answer 1

如果您不想迭代所有锚元素，则可以简单地使用 事件委托，例如：

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
  }
};

查看上面的例子这里。

Answer 2

使用 jQuery：

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

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

Answer 3

与 Benji XVI 的答案类似，但使用 querySelectorAll，例如在具有“container”类的容器 div 中并使用 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')
  }
})

Answer 4

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

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

Answer 5

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

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

有一些致力于客户端路由器的人正在尝试完善这一点。