javascript - Chrome 中凌乱的鼠标事件

Question

在 IE 或 Firefox 中，网站的工作方式如下 (IE11):
(标签是可点击的)

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

看起来元素的分层与您看到的和您引发事件(例如:单击)时不同。第一个/父 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>

在此先感谢您的帮助!

Answer 1

要使你的工作 100% 圣洁，请将你的 JS 代码包装在

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

其次，我不建议使用这么大的限定符 $('li')。这将扫描 DOM 树中的每个列表元素 - 很慢并且不建议这样做。在这里，您只对菜单中的列表元素感兴趣。我也会通过 id 找到翻转按钮，你只有一个按钮，所以它不会花费太多:)

我会提出这样的建议:

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

即使您向 DOM 添加了更多 li 元素，此代码也应该有效。其次，您可以在 Debug模式下查找是否已找到此 navContainer。