javascript - 在子元素的 onclick 事件处理程序中定位父元素

Question

是否可以在 javascript 中使用事件处理程序定位父 div 的 ID？

给定以下代码，当您单击图像时，会触发包含图像“two”ID 的警报。是否可以返回“one”，它是父 div 的 ID，而不是出现在这个框中？

<div id="one">
    <p>Some Text</p>
    <img src="http://placehold.it/48x48" alt="" id="two" onclick="random(id)" />
</div>
    
<script>
    function random(id) {
        alert("working" + " " + id);
    }
</script>

Answer 1

您可以执行 this.parentNode 来获取对父节点的引用。然后你可以用 .id 得到它的 ID。所以 alert(this.parentNode.id) 应该可以工作。

<div id="one">
    <p>Some Text</p>
    <img src="http://placehold.it/48x48" alt="" id="two" onclick="random(this)" />
</div>
    
<script>
    function random(node) {
        alert("working" + " " + node.parentNode.id);
    }
</script>