在普通 JS 中获取单击元素的父节点

Question

我需要在纯 JS 中获取单击元素的父节点（没有 jQuery 或其他框架） 我目前正在使用 document.getElementById("item_click") 但我想将 id="item_click" 更改为 class="item_click" 这样我就可以使用多个框。 我只是不知道如何将 this 集成到脚本中

Here's a Fiddle <<<玩它

HTML

<div class="item">
    <div  class="item-tester" >
        <div class="item-icon"></div>
        <div class="item-title">Item Title</div>
    </div>
    <div id="item_click" onmousedown="new_class(event)" onmouseup="revert_class(event)" onmouseout="revert_class(event)"></div>
</div>

JS

function new_class(event) {
    wClick = document.getElementById("item_click");
    wTile = wClick.parentNode;
    wTile.className = wTile.className + " added-class";
}
function revert_class(event) {
    wTile.className = "item";
}
​

我想更改

wClick = document.getElementById("item_click");
wTile = wClick.parentNode;

为类似

wClick = this;
wTile = wClick.parentNode;

我知道如何在 jQuery 中执行此操作的内容，但它在纯 JS 中不起作用，因为 this 将是 window （我想想）

顺便说一句。 我需要（事件），因为这只是我正在使用的整个代码的精简版。

Answer 1

function new_class(event) {
    wTile = event.target.parentNode;
    wTile.className = wTile.className + " added-class";
}

Answer 2

您可以只使用 event.target.parentNode （甚至不需要在函数中传递 event）：

function new_class() {
    var parent = event.target.parentNode;
    // Do whatever...
}

Answer 3

“我只是不知道如何将这个集成到脚本中”

使用 .call() 调用处理程序来设置其 this 值为具有处理程序的元素...

<div id="item_click" onmousedown="new_class.call(this,event)" ...>

---

function new_class(event) {
    var wTile = this.parentNode;
    wTile.className = wTile.className + " added-class";
}