Question

我有像这样的javascript函数

function select_term(e){ 
    e = e || window.event;
    var target = e.target || e.srcElement;
    if (target.nodeType == 3) target = target.parentNode;

    console.log(target.innerHTML);
}

现在我调用此函数

<a href="#" onclick='select_term()' style='text-decoration:none'>{{ descriptor.name|safe }}</a>

所以这个函数应该给我这个锚元素的innerHTML。原则上

$(this).innerHTML

会完成这项工作，但我不明白我如何在函数中访问$（this）？

我的问题是上面的解决方案在所有情况下都不起作用，因为描述符名称看起来像

<em>test1</em>test2

如果用户点击test1，则javascript函数会打印出test1。如果用户点击test2，则javascript函数会打印出<em>test1</em>test2。我总是想要<em>test1</em>test2，因为我想要锚元素的innerHTML。

Answer 1

这是因为错误的事件属性使用。当用户点击e.target - <em>时，<a>元素为test2（文字e.target） - <a>为{{1} }}。要防止此类事件，您只需使用事件的currentTarget属性即可。试试这个：

function select_term(e){ 
    var target = e.currentTarget;
    console.log(target.innerHTML);
}

Answer 2

您可以将元素引用传递给您的函数，例如onclick='select_term(this)'。

请查看以下代码段：

＆＃13;

function select_term(obj) {
  // Here 'obj' refers to the anchor element
  console.log(obj.innerHTML);
}

＆＃13;

<a href="#" onclick='select_term(this)' style='text-decoration:none'>{{ descriptor.name|safe }}</a>

＆＃13;

Answer 3

在onclick函数中，this是元素，this.innerHTML会为您提供内部html。

在select_term内，this是window，因为您在没有任何上下文的情况下调用它。有关详细信息，请参阅how does the this keyword work。

$是一个未定义的变量。如果你已经将它定义为jQuery，那么$(this)将为你提供一个包含this元素的jQuery对象。 $(this).innerHTML会给你undefined，因为jQuery不会提供innerHTML（它确实有html 函数。）

如果您想在innerHTML函数中获取a元素的select_term，那么您必须：

编写未在90年代陷入困境且使用addEventListener而不是onclick 属性的
将元素对象传递给select_term函数

如果你想使用第一块代码获取元素，那么你需要做同样的事情，只有事件对象。

事件处理函数自动将事件对象作为第一个参数传递，但调用onclick函数的select_term函数是事件处理程序。 select_term本身不是。

function select_term(e) {
  e = e || window.event;
  var target = e.target || e.srcElement;
  if (target.nodeType == 3) target = target.parentNode;

  console.log(target.innerHTML);
}

document.querySelector("a").addEventListener("click", select_term);

<a href="#" style='text-decoration:none'>{{ descriptor.name|safe }}</a>

也就是说，您可以使用currentTarget代替当前用来尝试识别元素的所有小提琴。

function select_term(e) {
  var target = e.currentTarget;
  console.log(target.innerHTML);
}

document.querySelector("a").addEventListener("click", select_term);

<a href="#" style='text-decoration:none'>{{ descriptor.name|safe }}</a>

注意：如果您正在撰写href="#"，那么您没有链接，也不应使用<a>。请考虑使用<button type="button">...</button>。

在javascript函数中使用$（this）

3 个答案: