1

我想要以下行为。

  1. “Foo”显示在浏览器上。
  2. 如果您在“Foo”上按下鼠标按钮，“Foo”将显示“Bar”。
  3. 如果您释放按钮，“Bar”将再次显示“Foo”。
  4. 最后在警告框中显示“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>
4

2 回答 2

0
  1. 'foo' 显示在浏览器上。
  2. 如果您在“foo”上按下鼠标按钮，“foo”将显示“bar”。
  3. 如果您释放按钮，“bar”将再次显示“foo”。
  4. 最后，警告框中显示“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/

于 2013-10-10T22:22:08.613 回答
0

当和 事件click同时发生时mousedown，mouseup事件就发生了。click您可以在末尾附加您的代码mouseup

$("#parent").mouseup(function(){
    $("#foo").show();
    $("#bar").hide();
    alert("Hello");
});
于 2013-10-10T21:32:01.810 回答