[英]Get the specific div id from an onclick event (Pure JS no Jquery)
When I try the code referenced in SO #1 , I get the console logging a blank string: 当我尝试在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);
}
}
I want to bind to my class function 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);
}
But that shows undefined. 但这表明未定义。 When I log srcElement, I get the full element 当我登录srcElement时,我得到了完整的元素
<choice0>path 1</choice0>
I want to get just the div id when I click, so I can parse that and do logic. 当我单击时,我只想获取div ID,因此我可以解析它并执行逻辑。
I'd recommend the following approach, as it is the standard: 我建议采用以下方法,因为它是标准方法:
//assign the event
choiceDiv.addEventListener('click', clicked)
//define the listener
function clicked(event) {
console.log(event.currentTarget)
}
update: 更新:
I'm tempted to offer a fix to your code, because I don't think you're achieving what are you trying to actually do: 我很想为您的代码提供一个修复程序,因为我认为您没有实现您实际上想做的事情:
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"
}
Your "clicked" function are receiving an Event rather than a HTML Element. 您的“单击”功能正在接收事件,而不是HTML元素。 This is the default behavior when an onClick event triggered. 这是触发onClick事件时的默认行为。
The click event have a srcElement property, indicating the source element the click event occurred upon. click事件具有srcElement属性,指示发生click事件的源元素。 This event object have no parentNode property. 此事件对象没有parentNode属性。
Use e.srcElement.parentNode instead. 请改用e.srcElement.parentNode。
BTW, in the SO #1 example, it assign "showIt(this)" to onClick, so browser pass "this", the target element rather than the event object, to the onClick function. 顺便说一句,在SO#1示例中,它为onClick分配了“ showIt(this)”,因此浏览器将目标元素而非事件对象“ this”传递给onClick函数。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.