如何在事件目标返回子元素时获取点击事件的父元素？

Question

JavaScript

function productBox(event){
    event.stopPropagation();
    console.log(event.target);
}
var product = document.getElementsByClassName('product');
for (var g = 0, length = product.length; g < length; g++){
    console.log('here');
    product[g].addEventListener('click',productBox);
}

HTML

<div class="product">
    <div class="productContent">
       <img src="file:///C|/Users/Jacob/Downloads/12939681_1597112303636437_733183642_n.png" />
    </div>
    <div class="productName">
         Here
    </div>
    <div class="productDescription">

    </div>

问题在于当点击产品元素时，事件目标返回的是事件监听器的实际子元素。例如，我点击“产品”，它将返回productContent，productName或productDescription作为目标，但实际上我想要的是“产品”元素，然后执行.childNodes并在其中查找图像。

请注意，jQuery不是一个选项，因为它是30kb的东西，我不会用它，因为这是一个几乎没有任何javascript的静态html页面。

我想也许可以进行以下操作，

检查元素是否为“产品”，如果不是，则获取其父元素并检查其是否为“产品”，如果不是则继续向上寻找父元素，以此类推。然后在其中查找img标签。但我觉得那是一个冗长的解决方法。

有什么想法吗？

- user3940738

---

这个或者currentTarget不起作用吗？https://developer.mozilla.org/en-US/docs/Web/API/Event/currentTarget - Dave Newton

this 给你绑定的元素。 - user1106925

谢谢。this可以工作。完全忘记了this是在调用它的地方而不是定义它的地方。想把它作为答案放上去，这样我就可以接受了吗？ - user3940738

Answer 1

为了获取处理程序所绑定的元素，您可以在处理程序内部使用this关键字。 正如@DaveNewton所指出的那样，event对象具有一个.currentTarget属性，也可以使用。这很好，因为您可以拥有手动绑定this的函数，使用.bind()或者您可能会使用新的箭头函数，它们具有由其原始环境定义的this，从而使以这种方式无法获取绑定的元素。

- user1106925

Answer 2

您可以使用目标元素的parentElement属性。

function productBox(event){
    var target = event.target;
    var parent = target.parentElement;//parent of "target"
    //Rest of your code
}

- thisisbobbs

---

我尝试过了。问题在于，如果事件在图像（或任何其他子元素）上触发，那么parentElement将返回“productContent”。或者，在事件目标实际返回“product”的情况下，它将获取其上面的元素。 - user3940738

那似乎很冗长，也不是通用的，因为可能会有额外的嵌套dom元素。 - Dave Newton

在这种情况下，您应该在处理程序中使用“this”。 - thisisbobbs

Answer 3

我知道有点晚了，但获取事件处理程序实际附加到的目标的最简单解决方案是使用事件 currentTarget 属性。

这将避免不必要的 DOM 检查，并在所有现代浏览器上开箱即用。

Event.currentTarget on MDN

Event 接口的 currentTarget 只读属性标识事件的当前目标，当事件遍历 DOM 时。它始终指向已附加事件处理程序的元素，而不是 Event.target，后者标识发生事件的元素，可能是其后代。

- saeraphin

Answer 4

我曾经问过一个类似的问题：如果你有一个element.click(function(){})，而且这个元素有两个或多个兄弟节点。如果事件触发器附加到父级而不是目标，则此帖子会弹出并且实际上与我的问题无关，因此我决定在这里发布我的搜索结果以供他人参考。

我使用了这种方法：

if (target.closest('.NEftune').attr('rel') != undefined){
 /*do something here*/ 
}

最接近的jQuery和JavaScript方法从被点击的目标开始冒泡，直到找到你要查找的属性。在我的情况下，事件附加到具有类(.NEftune)的元素上，通过添加额外的属性，我可以确定是否在包含图像的容器(.NEftune)内部。

- Antony Falencikowski

---

“NEftune”是什么？这个问题涉及到“产品”。它也涉及到console.log(event.target)，而不是某些rel属性。请确保您实际回答了问题。 - Sebastian Simon

Sebastian，我认为你误读了问题。他们试图点击父元素而不是兄弟元素，.NEftune是被点击元素的父元素，如果你感觉更好，可以用.product || #product替换.NEftune。为什么要额外添加属性？在这种情况下，rel是为了确保冒泡运行其完整过程，在它找到的第一个.NEftune处。 - Antony Falencikowski