auto-click event on key events?
Why does an additional click event fire upon any key event? This has been observed in FF45
by Laberwurschd
HTML
<body>
<main>
<h1>My Quiz</h1>
<p>Here could be a quiz...</p>
<section id="quiz"></section>
</main>
</body>
JavaScript
var myQuiz = {
container: null,
// helper function
createElement: function(o) {
var el, p;
if (o && (o.tag || o.tagName)) {
el = document.createElement(o.tag || o.tagName);
if (o.text || o.txt) {
el.appendChild(
document.createTextNode(o.text || o.txt)
);
}
for (p in o) {
if (!p.match(/^t(e)?xt|tag(name)?$/i)) {
el[p] = o[p];
}
}
}
return el;
},
// user interface for a quiz question
createOptions: function() {
var t = this,
ul = document.createElement("ul");
t.emptyContainer();
t.intoContainer(t.createElement({
tag: "h1",
text: t.currentQuestion.getQuestion()
}));
t.intoContainer(ul);
t.currentQuestion.getOptions().forEach(function(s, i) {
var li = document.createElement("li"),
label = t.createElement({
tag: "label",
text: s
}),
radio = t.createElement({
name: "anwer",
tag: "input",
type: "radio",
value: s
});
ul.appendChild(li);
li.appendChild(label);
label.insertBefore(radio, label.firstChild);
});
// Hinweis für Tastatur-User
t.intoContainer(t.createElement({
tag: "p",
text: "If using the keyboard please use the enter key to finalize your choice."
}));
},
currentQuestion: null,
// data could be filled from an external source (JSON)
data: [{
question: "What is Germany's capital?",
solution: "Berlin",
falses: ["Hamburg", "München", "Hannover"]
}, {
question: "Who is currently Germany's head of state?",
solution: "Angela Merkel",
falses: ["Joachim Gauck", "Sigmar Gabriel", "Norbert Lammert"]
}],
emptyContainer: function() {
var t = this;
while (t.container.firstChild) {
t.container.removeChild(t.container.firstChild);
}
},
handleInput: function(ev) {
var t = this, // t points to myQuiz
...