Question

当我尝试SO #1中引用的代码时，我得到控制台记录一个空白字符串：

installChoices() {
        var choices = this.game.page.options;
        for (var i = 0; i < choices.length; i++) {
            var choice = choices[i];
            var choiceDiv = document.createElement("choice" + i);
            choiceDiv.innerText = choice[0];
            choiceDiv.onclick = function() {
                console.log(this.id);
            }
            this.choicesContainer.appendChild(choiceDiv);
        }

    }

我想绑定到我的类函数clicked

installChoices() {
        var choices = this.game.page.options;
        for (var i = 0; i < choices.length; i++) {
            var choice = choices[i];
            var choiceDiv = document.createElement("choice" + i);
            choiceDiv.innerText = choice[0];
            choiceDiv.onclick = this.clicked;
            this.choicesContainer.appendChild(choiceDiv);
        }

    }

    clicked(e) {
        console.log(e.parentNode); //this is undefined
        console.log(e.srcElement);
    }

但是这显示未定义。当我记录srcElement时，我得到了完整的元素

<choice0>path 1</choice0>

当我点击时，我想得到div id，所以我可以解析它并做逻辑。

Answer 1

我推荐以下方法，因为它是标准：

//assign the event
choiceDiv.addEventListener('click', clicked)

//define the listener
function clicked(event) {
    console.log(event.currentTarget)
}

<强>更新

我很想修复你的代码，因为我不认为你实现的是你想要实现的目标：

function installChoices() {
    var choices = this.game.page.options;
    for (var i = 0; i < choices.length; i++) {
        var choice = choices[i];
        var choiceDiv = document.createElement("div");
        choiceDiv.id = "choice" + i;
        choiceDiv.innerText = choice[0];
        choiceDiv.addEventListener("click", clicked);
        this.choicesContainer.appendChild(choiceDiv);
    }
}

function clicked(ev) {
    console.log(ev.currentTarget.id); //this will log "choice0"
}

Answer 2

您点击了＆＃34;＆＃34;函数正在接收事件而不是HTML元素。这是触发onClick事件时的默认行为。

click事件具有srcElement属性，指示发生click事件的源元素。此事件对象没有parentNode属性。

请改用e.srcElement.parentNode。

BTW，在SO＃1示例中，它分配＆＃34; showIt（this）＆＃34; onClick，所以浏览器将目标元素而不是事件对象传递给onClick函数。

从onclick事件中获取特定的div id（Pure JS no Jquery）

2 个答案: