Question

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

Here's a Fiddle＆lt;＆lt;＆lt;玩它

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

“我只是不知道如何在脚本中集成this”

使用.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";
}

Answer 3

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

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

获取普通JS中clicked元素的parentNode

3 个答案: