Javascript chrome中混乱的鼠标事件

在IE或Firefox中，站点的工作方式如下（IE11）：
（选项卡可单击）

但不是镀铬的。点击标签不会被解雇。我试图在开发人员工具中显示元素，但它显示的是

#container

元素，而不是我单击的

li

元素

看起来元素的分层与您在引发事件时看到的不一样（例如：单击）。第一个/parent

div

是顶部元素，选项卡（

li

）嵌套在后面

为什么它能在IE和Firefox中工作，为什么不能在Chrome中工作？有什么区别

$（“按钮”）。单击（函数（）{
$（'.box'）.toggleClass（'flipped'）；
})
$（'li'）。单击（函数（）{
var text='您选择了'+$（this.html（）；
警报（文本）；
});
*{
保证金：0；
填充：0
}
钮扣{
位置：固定；
右：5px；
底部：5px；
}
.盒子{
位置：相对位置；
宽度：300px；
高度：300px；
变换原点：右中心；
过渡计时功能：立方贝塞尔（1.000,0.000,0.000,1.000）；
转换：所有300毫秒，转换500毫秒；
}
.方框图{
位置：绝对位置；
宽度：100%；
身高：100%；
过渡：能见度为0到140ms；
}
.box:未（.翻转）figure.back{
可见性：隐藏；
}
.盒子翻了{
变换：translateX（-100%）rotateY（-180度）；
}
.盒子，前面{
背景色：天蓝色；
}
.盒子，回来{
变换：旋转（180度）；
背景颜色：浅绿色；
}
.盒子.背面.导航{
位置：绝对位置；
排名：0；
左：0；
右：0；
高度：32px；
宽度：100%；
背景色：天蓝色；
文本对齐：居中；
}
.盒子.背面.李导航{
背景色：白色；
宽度：24%；
显示：内联块；
高度：30px；
线高：30px；
}

正面


菜单1
菜单2
菜单3
菜单4

背面

翻转
要100%专注于你的工作，请将你的JS代码包装在

$(document).ready(function(){ ... })

其次，我不建议使用这么大的限定符$（'li'）。这将扫描DOM树中的每个列表元素，速度慢且不建议。这里您只对菜单中的列表元素感兴趣。
我还可以根据id找到Flip按钮，因为您只有一个按钮，所以成本不高：）

我建议这样做：

var navContainer = $('.box > figure.back > ul.nav');
navContainer.on('click', 'li', function(){  ...  })

即使向DOM添加更多li项，此代码也应该可以工作。
其次，您可以在调试模式下查找，如果这个navContainer已找到或未找到。
我找到了解决问题的方法。如果我将
z-index:0
和
position:relative
设置为
body
，然后单击
body>div

解决方案：CSS

body, body > div { position: relative; z-index: 0; }


$（'button，.front'）。单击（函数（）{
$（'.box'）.toggleClass（'flipped'）；
})
$（'li'）。单击（函数（）{
var text='您选择了'+$（this.html（）；
警报（文本）；
});
/*解决方法*/
身体，
正文>div{
位置：相对位置；
z指数：0；
}
/************/
* {
保证金：0；
填充：0
}
钮扣{
位置：固定；
右：5px；
底部：5px；
}
.盒子{
位置：相对位置；
宽度：300px；
高度：300px；
变换原点：右中心；
过渡计时功能：立方贝塞尔（1.000,0.000,0.000,1.000）；
转换：所有300毫秒，转换500毫秒；
}
.方框图{
位置：绝对位置；
宽度：100%；
身高：100%；
过渡：能见度为0到140ms；
}
.box:未（.翻转）figure.back{
可见性：隐藏；
}
.盒子翻了{
变换：translateX（-100%）rotateY（-180度）；
}
.盒子，前面{
背景色：天蓝色；
}
.盒子，回来{
变换：旋转（180度）；
背景颜色：浅绿色；
}
.盒子.背面.导航{
位置：绝对位置；
排名：0；
左：0；
右：0；
高度：32px；
宽度：100%；
背景色：天蓝色；
文本对齐：居中；
}
.盒子.背面.李导航{
背景色：白色；
宽度：24%；
显示：内联块；
高度：30px；
线高：30px；
}

正面


菜单1
菜单2
菜单3
菜单4

背面

翻转
只按减号按钮根本不起作用！请留下评论，我如何改进我的问题！我没有投票决定结束，但如果你能以更具描述性的方式给出预期行为和实际行为，这会有所帮助。还可以看到一个或一个预期的行为显示在gif上，或者您可以在IE和Firefox中测试它，附带JSFIDLE I。我尽可能地简化代码。我不想删除尺寸和背景色以保持逼真。JSFIDLE正在为我使用chrome。你使用的是什么版本的chrome。矿山面积为37.0.2062.124毫米，矿山面积为37.0.2062.120米。只是翻页还是你也可以点击标签？（菜单1，菜单2…）谢谢。我感谢你愿意帮忙。真正的代码并不是那么简单。这只是一个重现问题的例子。我运行了你在Chrome版本“37.0.2062.124 m”上提供的JS小提琴，但它不工作。如果已修复此问题，请共享代码。您可以使用StackOverflow代码段，而不是使用JSFIDLE：我将JSFIDLE替换为内部查看器/编辑器。它对我有用。我使用的代码：
body，body>div{position:relative；z-index:0；}