Question

我需要将这个jquery翻译成vanilla js：

$(document).on('click', 'a', function(){
    //do something
});

我已经尝试了

document.addEventListener('click', function(e) {
    if(e.target.tagName === 'A')
    {
        //do something
    }
});

但是，如果点击的元素是a的孩子，则它无法正常工作，例如

<a href="...">
    <!-- if I click on the image, e.target.tagName === 'IMG' -->
    <img src="img.jpg">
</a>

我无法使用document.getElementsByTagName('a')，因为即使动态创建它也应该有用。

另外，我需要访问href的{{1}}属性。

最简单的方法是什么？

Answer 1

在现代浏览器中，您可以使用Element.closest() - IE不支持

＆＃13;

For Y = 0 To MaxY - 1
    X0 = X
    X1 = X + 1
    Y0 = Y
    Y1 = Y + 1
    Z00 = a(X0, Y0)
    Z01 = a(X0, Y1)
    Z10 = a(X1, Y0)
    Z11 = a(X1, Y1)
    Normal(X1 - X0, Y1 - Y0, Z11 - Z00, X1 - X0, 0, Z10 - Z00)

    objWriter.WriteLine("  facet normal " & f(i) & " " & f(j) & " " & f(k))
    objWriter.WriteLine("    outer loop")
    objWriter.WriteLine("      vertex " & f(X) & " " & f(Y) & " " & f(a(X, Y)))
    objWriter.WriteLine("      vertex " & f(X + 1) & " " & f(Y + 1) & " " & f(a(X + 1, Y + 1)))
    objWriter.WriteLine("      vertex " & f(X + 1) & " " & f(Y) & " " & f(a(X + 1, Y)))
    objWriter.WriteLine("    endloop")
    objWriter.WriteLine("  endfacet")

    Normal(0, Y1 - Y0, Z01 - Z00, X1 - X0, Y1 - Y0, Z11 - Z00)

    objWriter.WriteLine("  facet normal " & f(i) & " " & f(j) & " " & f(k))
    objWriter.WriteLine("    outer loop")
    objWriter.WriteLine("      vertex " & f(X) & " " & f(Y) & " " & f(a(X, Y)))
    objWriter.WriteLine("      vertex " & f(X) & " " & f(Y + 1) & " " & f(a(X, Y + 1)))
    objWriter.WriteLine("      vertex " & f(X + 1) & " " & f(Y + 1) & " " & f(a(X + 1, Y + 1)))
    objWriter.WriteLine("    endloop")
    objWriter.WriteLine("  endfacet")

Next Y

＆＃13;

document.addEventListener('click', function(e) {
  e.preventDefault();
  if (Element.prototype.closest) {
    if (e.target.closest('a')) {
      console.log('found')
    }
  } else {
    //else the long way
    var el = e.target;
    while (el && el.tagName != 'A') {
      el = el.parentNode;
    }
    if (el) {
      console.log('found')
    }
  }
});

＆＃13;

Answer 2

带走DOM

你有一个包含图像的锚标记，你想要捕获点击事件。

currentTarget属性（在注释中建议）没有用，因为处理程序附加到document，即currentTarget = document。

解决方案是捕获图像上的点击，然后向上走DOM树以检查父元素是否为锚标记。

下面的代码说明了如何使用while循环完成此检查。它还显示target，currentTarget和parentElement。如您所见，单击链接中的文本会产生与单击图像不同的输出。

运行代码段以尝试

document.addEventListener('click', function(e) {
  var t = e.target;
  while (t) {
    if (t.tagName === 'A') {

      // do something ...

      debug.innerHTML += (
        'target = ' + e.target +
        '\ncurrentTarget = ' + e.currentTarget +
        '\nparentElement.tagName = ' + t.tagName + '\n'
      );

      break;
    }
    t = t.parentElement;
  }


});


// dynamically add link with image
var a = document.createElement('A');
a.href = 'javascript:void(0)';
a.innerHTML = 'Click Me!<br><img src="http://lorempixel.com/100/50">';
document.getElementById('content').appendChild(a);

img {width:100px;height:50px;background-color:aliceblue;}

<span id="content"></span>
<xmp id="debug"></xmp>

按标记名称

2 个答案:

带走DOM