javascript - Chrome中的凌乱鼠标事件

在IE或Firefox中，网站的工作方式如下（IE11）：

（可单击选项卡）

但不是铬。单击选项卡不被解雇。我试图在开发人员工具中显示元素，但它显示的是#container元素而不是我单击的li元素。

看起来元素的分层与您看到的以及引发事件时（例如：click）不同。第一个/父div是顶部元素，选项卡（li）嵌套在后面。

为什么它可以在IE和Firefox中运行，为什么不能在Chrome中运行？有什么区别？

$('button').click(function() {
  $('.box').toggleClass('flipped');
})

$('li').click(function() {
  var text = 'You selected ' + $(this).html();
  alert(text);
});

* {
  margin: 0;
  padding: 0
}
button {
  position: fixed;
  right: 5px;
  bottom: 5px;
}
.box {
  position: relative;
  width: 300px;
  height: 300px;
  transform-origin: right center;
  transition-timing-function: cubic-bezier(1.000, 0.000, 0.000, 1.000);
  transition: all 300ms, transform 500ms ease;
}
.box figure {
  position: absolute;
  width: 100%;
  height: 100%;
  transition: visibility 0s ease 140ms;
}
.box:not(.flipped) figure.back {
  visibility: hidden;
}
.box.flipped {
  transform: translateX(-100%) rotateY(-180deg);
}
.box .front {
  background-color: skyblue;
}
.box .back {
  transform: rotateY(180deg);
  background-color: lightgreen;
}
.box .back .nav {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 32px;
  width: 100%;
  background-color: skyblue;
  text-align: center;
}
.box .back .nav li {
  background-color: white;
  width: 24%;
  display: inline-block;
  height: 30px;
  line-height: 30px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
  <div class='box'>
    <figure class='front'>
      <p>FRONT SIDE</p>
    </figure>
    <figure class='back'>
      <ul class='nav'>
        <li>Menu 1</li>
        <li>Menu 2</li>
        <li>Menu 3</li>
        <li>Menu 4</li>
      </ul>
      <div class='content'>
        <p>BACK SIDE</p>
      </div>
    </figure>
  </div>
</div>
<button>FLIP</button>

在此先感谢您的帮助！

最佳答案

要成为工作的100％的圣人，请将JS代码包装在

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

其次，我不建议使用这么大的限定词$（'li'）。这将扫描DOM tree-slow中的每个列表元素，不建议这样做。在这里，您仅对菜单中的列表元素感兴趣。
我还可以通过id查找“翻转”按钮，您只有一个按钮，因此花费不多：)

我会提出这样的建议：

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

即使您向DOM中添加了更多li项目，此代码也应该起作用。
其次，您可以在调试模式下查找是否找到了该navContainer。

关于javascript - Chrome中的凌乱鼠标事件，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/25847390/