Question

为了避免垃圾邮件，我将链接更改为一个JavaScript函数，该函数可在单击链接时解码并设置href。

HTML：

<li><a id="email"><i class="fas fa-email"></i></a></li>

JS：

function decode(a) {
  return a.replace(/[a-zA-Z]/g, function(c){
    return String.fromCharCode((c <= "Z" ? 90 : 122) >= (c = c.charCodeAt(0) + 13) ? c : c - 26);
  })
}

function openEmail(element) {
  var b = decode("DecodedMailToEmailAddress");
  element.setAttribute("href", b);
  element.setAttribute("onclick", "");
};

document.addEventListener('DOMContentLoaded', function () {
  document.getElementById('email').addEventListener('click', openEmail);
});

但是每次我单击链接时，都会出现以下错误：

TypeError: element.setAttribute is not a function

它具体指向：

element.setAttribute("href", b);

（然后是第二行，如果我放在第一行）

我在做什么错？在此之前，我使用过onClick HTML属性来调用openEmail（this）函数，但是我正在尝试实施内容安全策略，并且认为onClick是不安全的内联。

谢谢！

Answer 1

如Pointy所述，事件处理程序传递给event object，而不是元素。

改为使用this.setAttribute(...)。 this是指处理程序绑定到的元素。

请注意，element.setAttribute("onclick", "");不会删除您通过addEventListener添加的事件处理程序，而应使用removeEventListener：

function openEmail(element) {
  var b = decode("DecodedMailToEmailAddress");
  this.setAttribute("href", b); // or just this.href = b;
  this.removeEventListener("click", openEmail);
}

您可以了解有关quirksmode.org和MDN上事件处理的更多信息。

Answer 2

事件处理程序将事件属性赋予回调函数。您要查找的元素可以在event.target中找到。

因此函数变为：

function openEmail(event) {
  var b = decode("DecodedMailToEmailAddress");
  event.target.setAttribute("href", b);
  event.target.setAttribute("onclick", "");
};

顺便说一句，您还可以使用event.target.href = …来设置事件处理程序，最好用addEventListener来完成，而不是像在代码的另一部分中那样设置onclick。

尝试设置href时element.setAttribute不是函数

2 个答案: