Chrome中的凌亂鼠標事件

Question

在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> 

在此先感謝您的幫助！

Answer 1

要成為工作的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，則可以在調試模式下查找。

Answer 2

我找到了解決我問題的方法。 如果我將z-index: 0和position: relative對於body ，並且body > div則單擊觸發。

解決方案：CSS

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

 $('button, .front').click(function() { $('.box').toggleClass('flipped'); }) $('li').click(function() { var text = 'You selected ' + $(this).html(); alert(text); }); 

 /*Workaround*/ body, body > div { position: relative; z-index: 0; } /************/ * { 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 class='container'> <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>