在动画元素时捕获鼠标单击答案

【问题标题】：Capture mouse click while animating an element在动画元素时捕获鼠标单击
【发布时间】：2014-01-18 07:59:21
【问题描述】：

我正在尝试为 div 设置动画并在用户单击它时更改其背景颜色。

这是一个示例代码：

<html>
    <head>

        <script type="text/javascript" src="jquery.js"></script>

        <script type="text/javascript">
        $(window).load(function() {
            $("#one").hover(function() {
                $("#one").stop().animate({
                    top: -200
                }, 300);
            }, function() {
                $("#one").stop().animate({
                    top: 0
                }, 300);
            });
            $("#one").click(function() {
                $("#first").css("backgroundColor", "green");
                $("#second").css("backgroundColor", "green");
            });
        });
        </script>
        <style>
        #container {
            position:relative;
            width:200px;
            height:200px;
            overflow:hidden;
        }

        #one {
            position:absolute;
        }

        #first {
            background-color:blue;
            width: 200px;
            height:200px;
        }

        #second  {
            background-color:red;
            width: 200px;
            height:200px;
        }
        </style>
    </head>
    <body>
        <div id="container">
            <div id="one">
                <div id="first"></div>
                <div id="second"></div>
            </div>
        </div>
    </body>
</html>

可以，但是好像直到动画结束才触发点击事件。

您可以看到in this JSFiddle，如果您将鼠标悬停在元素上并在制作动画时单击它，则不会发生任何事情。如果等待动画停止再点击，鼠标点击会使背景发生变化。

有没有办法让 javascript 在制作动画时监听点击？

【问题讨论】：

对我来说很好 -> jsfiddle.net/B6gqA/1
@adeneo 您更改了执行时间。如果你离开它 300，你会发现它不起作用
你怎么能在 0.3 秒内点击某个东西？
^^ 我的意思是，单击是对同一个元素的 mousedown 和 mouseup，您有两个元素，因此鼠标在第一个元素上向下，在第二个元素上向上，如它们移动得如此之快，这不会让它成为一个点击，因为它们是两个不同的元素，即使你将事件处理程序附加到父元素，它仍然依赖于冒泡，并且当事件不工作时它不起作用不要从同一个元素中冒泡。这为你解释了吗？
旁注，仅监听 mousedown 或 mouseup 事件而不是单击会起作用

标签： javascript jquery html animation

【解决方案1】：

click 事件仅在 mousedown 和 mouseup 事件发生在同一元素上时才会发生，即使您正在侦听父元素上的事件冒泡。

要解决这个问题，您可以只监听 mouseup 事件，这不需要首先在同一元素上存在 mousedown 事件。
我能想到的唯一缺点是mouseup 事件也会在文档上的任意位置按住鼠标按钮时触发，然后将其拖入元素并释放，因为这也是mouseup 事件，但这似乎成为这里的重点，可能不是问题。

$("#one").on('mouseup', function() {
    $("#first").css("backgroundColor", "green");
    $("#second").css("backgroundColor", "green");
});

【讨论】：