Question

我正在尝试设置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>

它可以工作，但似乎在动画结束之前不会触发click事件。

你可以看到in this JSFiddle，如果你用鼠标悬停元素并在动画时点击它，没有任何反应。如果等待动画停止并再次单击，则单击鼠标将使背景发生变化。

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

Answer 1

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

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

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

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

1 个答案: