[英]Why can't I add an event listener to the div?
I have an object, which has a method that creates divs, then assigns them an on-click event, but I also want to assign them an onkeypress event, but it won't let me do it... 我有一个对象,该对象具有创建div的方法,然后为它们分配一个on-click事件,但是我也想为它们分配一个onkeypress事件,但是它不允许我这样做。
This is the method which creates divs. 这是创建div的方法。 It works fine.
工作正常。
populateSquares(){
let relatedTagToPopulation = document.getElementById("questionp");
let whatTextIs = relatedTagToPopulation.textContent;
for (let u=0;u<this.stemQuestions.length;u++){
if (this.stemQuestions[u]==whatTextIs){
var populateSquaresPertinentInt = u;
}
}
for (let i=0;i<this.stemAnswers.length;i++){
if (i==populateSquaresPertinentInt){
let numberOfSquaresToAdd = this.stemAnswers[i].length;
for (let j=0;j<numberOfSquaresToAdd;j++){
let elToAdd = document.createElement("div");
elToAdd.id="ans"+j+"";
elToAdd.className="lans";
elToAdd.onclick= hangmanGame.selectThisSquare;
console.log(elToAdd);
let elToAddInto = document.getElementById("answeri");
elToAddInto.appendChild(elToAdd);
}
}
}
},
This is the method that adds some properties to the div and also an event listener 这是将一些属性添加到div以及事件监听器的方法
selectThisSquare(e){
let currentElementId = e.target.id;
document.getElementById(currentElementId).style.cursor = "text";
document.getElementById(currentElementId).style.backgroundColor = "#557a95";
document.getElementById(currentElementId).onkeydown = hangmanGame.textInputHandler;
console.log(e.target.id);
let x = hangmanGame.giveCurrentQuestionAndWord();
let xs = x[1];
hangmanGame.deselectAllOtherSquares(currentElementId,xs);
},
This is the method that is supposed to trigger when the key is pressed, but nothing is triggered. 这是应该在按下键时触发的方法,但是什么也不会触发。
textInputHandler(){
console.log(4);
},
A div
by default isn't "selectable" and thus it won't react to any keydown events. 默认情况下,
div
是“可选”的,因此它不会对任何按键事件做出反应。 However, you can make it selectable by adding tabindex="0"
to the div. 但是,您可以通过将div添加
tabindex="0"
使其变为可选。 This way it will become focusable when you click on it, which then allows the onkeydown
event to trigger. 这样,当您单击它时它将变得可聚焦,然后允许
onkeydown
事件触发。
See working example below: 请参见下面的工作示例:
const game = { addKeyDownListener() { document.getElementById("txt").onkeydown = game.handleTextInput }, handleTextInput() { console.log(4); } } game.addKeyDownListener();
#txt { height: 100px; width: 100px; border: 1px solid black; outline: none; /* add to hide outline */ }
<div type="text" id="txt" tabindex="0"></div>
Note: By default adding a tabindex
will give your div
a blue outline once selected. 注意:默认情况下,添加
tabindex
将为您的div
选定蓝色轮廓。 To remove this add the css outline: none
. 要删除此内容,请添加CSS
outline: none
。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.