在转换期间未点击的div

Question

我有一个带有onclick函数的简单div（注意我删除了svg的内容以便于阅读）：

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

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

这是没有问题的工作。但是div也有一个在悬停时向右移动一点的转变：

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

现在，有时（经常）在转换期间，不会触发click事件。这是一个常见问题吗？有解决方案吗？ 我试过的是制作一个包装器，它与动画一样大。但问题仍然存在。

我所做的是在我的圆形div周围添加一个包装器：

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

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

当然，我将onclick重新映射到包装器。我认为因为onclick在包装器上，现在包装器上有转换，onclick应该被触发。但正如所说，到目前为止没有成功。

Answer 1

这是因为Integrator Key非常敏感：您必须向下单击鼠标和，而不会移动元素。

您可以使用mousedown或mouseup代替：

click

这不会取决于运动。

如果您对非移动元素使用body.on('mouseup', '#sidebar-toggler', function() { $('#sidebar').toggleClass('collapsed'); }); 方法，但移动鼠标，则会发生同样的情况。它不起作用，因为它是拖动而不是点击。