Question

我想要以下行为。

浏览器上显示“Foo”。
如果您在“Foo”上按下鼠标按钮，“Bar”将显示为“Foo”。
“Foo”将再次显示为“Bar”。
最后，“Hello”会显示在警告框中。

我编写了以下代码，但最后一步从未发生过。似乎.hide（）方法阻止了onclick事件的发生。有什么想法修复？

<body>
<div id="parent">
    <div id="foo">Foo</div>
    <div id="bar">Bar</div>
</div>

<script>
$(function(){
    $("#foo").show();
    $("#bar").hide();

    $("#parent").mousedown(function(){
        $("#foo").hide();
        $("#bar").show();
    });

    $("#parent").mouseup(function(){
        $("#foo").show();
        $("#bar").hide();
    });

    $("#parent").click(function(){
        alert("Hello");
    });
})
</script>
</body>

Answer 1

发生click和mousedown事件时发生mouseup事件。您可以在click

的末尾修改mouseup的代码

$("#parent").mouseup(function(){
    $("#foo").show();
    $("#bar").hide();
    alert("Hello");
});

Answer 2

'foo'显示在浏览器上。
  如果你在'foo'上按下鼠标按钮，
'bar'将显示'foo'。
  如果您释放按钮，
'foo'将再次显示为'bar'。

最后，警告框中会显示“Hello”。

“最后”的含义有些含糊不清。但是，一个解决方案是在每个window事件从mousedown触发后向#foo对象添加事件侦听器。然后，您可以在其回调函数结束时删除侦听器，从而导致“仅一次点火”设计。

on_mouseup_fn = function(e) {
    //Third condition
    $('#foo').show();
    $('#bar').hide();
    //Fourth condition
    alert("Hello!");
    $(window).off('mouseup', on_mouseup_fn);
}

$(document).ready(function() {
    //First condition
    $('#bar').hide()
    $('#foo').on('mousedown', function(e) {
        //Second condition
        $(e.currentTarget).hide();
        $('#bar').show();
        //For third and fourth conditions
        $(window).on('mouseup', on_mouseup_fn);
    });
});

这是一个功能性的jsFiddle演示。如果我误解了你想要的元素行为，请告诉我。

http://jsfiddle.net/n9GcS/8/

mousedown之后的Click事件将不会发生mouseup事件

2 个答案: