格過渡

Question

期間不會激發我有一個onclick函數的簡單的div（注意我刪除爲可讀性SVG內容）：

<div id="sidebar-toggler"> 
    <svg></svg> 
</div> 

body.on('click', '#sidebar-toggler', function() { 
    $('#sidebar').toggleClass('collapsed'); 
}); 

，這是沒有問題幹活。但在div也有一個traqnsition一點點移到右側懸停：

&:hover 
    left: 30px 
    transition: left 0.4s ease-out 

現在，有時（經常）在過渡期間，將不會觸發Click事件。這是一個常見的問題，有沒有解決這個問題？ 我試過的東西是製作一個封裝div，它和動畫一樣大。但問題仍然存在。

我所做的就是添加一個包裝以防萬一我一輪的div像這樣：

() = Round div (button) 
_________ 
|  | = wrapper 
_________ 

transition 
From: 
_________ 
|() | 
_________ 
To: 
_________ 
| ()| 
_________ 

，當然我重新映射的onclick的包裝。我認爲，因爲onclick在包裝上，並且現在在包裝上有轉換，應點擊onclick。但正如所說，迄今爲止沒有成功。

Answer 1

這是因爲click非常敏感：您必須點擊鼠標雙方向下移動和而不移動元素。

你可以使用鼠標按下或鼠標鬆開來代替：

body.on('mouseup', '#sidebar-toggler', function() { 
    $('#sidebar').toggleClass('collapsed'); 
}); 

這將不依賴於運動。

如果在非移動元素上有onClick方法，但移動鼠標時也會發生同樣的情況。它不起作用，因爲它是一個拖動而不是點擊。