点击事件后mousedown和mouseup事件不会发生

“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>

来源

2013-10-10 user2488219

一个click事件occurrs当两个mousedown和mouseup事件发生。您可以将您的代码click上mouseup

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

来源

2013-10-10 21:32:01

但如果你点击的div以外，拖动鼠标到格，然后释放，这将产生警报，即使这不是一个click事件。 –

@ScottMermelstein由于他的描述警报必须在释放按钮之后显示，而不是实际的点击本身，因此它可能会工作 –

“富”结束时，显示在浏览器上。

如果您在'foo'上按下鼠标按钮，'bar'将显示'foo'。

如果您释放按钮，'foo'将再次显示'bar'。

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

你的意思是“终于”有些含糊之处。但是，一种解决方案是在每个mousedown事件从#foo触发后，将一个事件侦听器添加到window对象。然后，您可以在其回调函数结束时删除侦听器，从而产生“唯一一次触发”设计。

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-10 22:22:08

点击事件后mousedown和mouseup事件不会发生

回答

相关问题