點擊事件後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事件不會發生

回答

相關問題