我在标记中有一个带有连接事件监听器的列表,每个li包含一个或两个div,并且想法是根据点击的div来做一些事情。 HTML示例:
<ul id="list">
<li><div class="first a"></div><div class="second b c"></div></li>
<li><div class="first f"></div></li>
<li><div class="first e"></div><div class="second d r"></div></li>
…
JS示例:
var currentLang = 'en';
var failCounter = 0;
var currentArg = args[Math.floor(Math.random() * args.length)];
var previousArgs = [];
function keyClicked(event) {
if (event.target.className.split(' ').indexOf(currentArg) > -1) {
textBox.style.opacity = 0;
setTimeout(function () {
textBox.innerHTML = wonMessages[currentLang];
textBox.style.opacity = 1;
wrapper.className = 'alert alert-success wrapper-active';
}, 250);
wrapper.onclick = function () { location.href = "…" };
list.removeEventListener('click', keyClicked);
}
else {
if (failCounter < 1) {
failCounter++;
previousArgs.push(currentArg);
do { currentArg = args[Math.floor(Math.random() * args.length)]; }
while (previousArgs.indexOf(currentArg) > -1);
textBox.style.opacity = 0;
setTimeout(function () {
textBox.innerHTML = wrongMessages[currentLang];
textBox.style.opacity = 1;
wrapper.className = 'alert alert-warning';
}, 250);
}
else {
textBox.style.opacity = 0;
setTimeout(function () {
textBox.innerHTML = lostMessages[currentLang];
textBox.style.opacity = 1;
wrapper.className = 'alert alert-danger';
}, 250);
list.removeEventListener('click', keyClicked);
}
}
}
list.addEventListener('click', keyClicked);
问题在于,虽然它在IE和Chrome中运行良好,但由于某种原因,Firefox在类first
(li
中的第一个或唯一的一个div时不会触发事件如果li
只包含一个div),则单击。 Firefox只识别类second
的div的点击。
有什么想法,为什么?这些浏览器之间的区别是什么?
答案 0 :(得分:0)
如果它可能对某人有帮助 - 我找到了解决方案。问题在于CSS。应该触发事件的Div具有负z-index设置:active state。事实证明,由于某种原因,firefox拒绝为具有负z-index的元素触发事件。