Firefox 事件触发问题答案

【问题标题】：Firefox event firing issueFirefox 事件触发问题
【发布时间】：2015-07-26 04:36:49
【问题描述】：

我有一个带有连接事件侦听器的标记列表，每个 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 中运行良好，但由于某种原因，当类为 first 的 div （li 中的第一个或唯一一个，如果 li只包含一个 div) 被点击。 Firefox 只识别对 second 类的 div 的点击。有什么想法，为什么？这些浏览器之间的区别是什么？

【问题讨论】：

是时候等待 jquery 专家了，但不是在 javascript.. :)
@Qeremy jQuery 与上面发布的纯 JS 代码以及浏览器行为的差异有什么关系？
你还没有定义currentNote
@yxfxmx 你能提供一个jsfiddle吗？
@yxfxmx;我只是在开玩笑，但请准备好查看 jquery 答案.. :)

标签： javascript html firefox

【解决方案1】：

如果它可能对某人有所帮助 - 我已经找到了解决方案。问题在于 CSS。应该触发事件的 div 在 :active 状态下具有负 z-index 设置。事实证明，由于某种原因，firefox 拒绝为 z-index 为负的元素触发事件。

【讨论】：