JQuery雙擊而不是單擊單擊

我想使點擊疊加鏈接單擊而不是雙擊，以使疊加彈出工作。JQuery雙擊而不是單擊單擊

jQuery的

$(document).ready(function(){ 
    $("#MainHeadline").click(function(event){ 
     event.preventDefault(); 
     $(".MainHeadlineOverlay").fadeToggle("fast"); 
    }); 
}); 

$(document).click(function(event) { 
    if (!$(event.target).closest('.MainHeadlineOverlay-wrapper').length){ 
     $(".MainHeadlineOverlay").hide(); 
    } 
});`

HTML

<body> 
<div class="Headlines"> 
<div class="mainheadline"> 
     <div class="headline"> 
      <a href="" id="MainHeadline"><img src="boxing.jpg" width="100%" height="100%"></a> 
     </div> 
</div> 
</div> 

<div class="MainHeadlineOverlay" style="display: none;"> 
<div class="MainHeadlineOverlay-wrapper"> 
<div class="MainHeadlineOverlay-content"> 
<a class="closeMain">x</a> 
    <h3>Title</h3> 
    <p class="MainHeadlineOverlayAuthor">by Author Date</p> 
    <div class="leftoverlay"> 
     <img src="picture.jpg" height="100%" width="100%;"/> 
    </div> 
    <div class="rightoverlay"> 
    </div> 
    <div class="bottomoverlay"> 
    </div> 
</div> 
</div> 
</div> 
</body>

同樣，我需要雙擊，以獲得覆蓋彈出。我希望它只是一個單一的點擊。

來源

2015-06-25 Morris Zieve

也許你應該建立一個演示此或者如果你不知道，分享你的HTML。 – Burak

發生這種情況是因爲您有兩個點擊處理程序，它們相互矛盾。考慮以下幾行：

<div class="MainHeadlineOverlay" style="display: none;"> // initially hidden 

$(".MainHeadlineOverlay").fadeToggle("fast"); // called first on img click 

$(".MainHeadlineOverlay").hide(); // called second on img click

只需點擊一下，您就可以有效地隱藏覆蓋圖。當您在200 ms內（fadeToggle「快速」持續時間）再次單擊時，您可以觸發另一個fadeToggle()以顯示來自隱藏狀態的疊加。這是你所指的雙擊效果。

一個簡單的解決方案是通過像這樣

if (!$(event.target).closest('.MainHeadlineOverlay-wrapper, #MainHeadline').length){

演示在closest()增加另一個選擇排除從$(document).click()處理您的邏輯#MainHeadline：JSBin

來源

2015-06-26 03:53:36 Drakes

謝謝德雷克斯，喜歡你解釋它的方式。 –

JQuery雙擊而不是單擊單擊

回答

相關問題