Question

我想单击点击叠加链接，而不是双击，以使叠加弹出窗口正常工作。

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>

同样，我必须双击才能弹出叠加层。我希望它只需单击一下。

Answer 1

这种情况正在发生，因为您有两个点击处理程序，它们相互矛盾。请考虑以下几点：

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

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

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

只需单击一下，您就可以始终隐藏叠加层。当您在200毫秒（fadeToggle“快速”持续时间）内再次点击时，您可以触发另一个fadeToggle()以显示隐藏状态的叠加层。这是您所指的双击效果。

一个简单的解决方案是通过在closest()中添加另一个选择器来排除#MainHeadline处理程序中逻辑的$(document).click()

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

演示： JSBin

JQuery双击而不是单击

1 个答案: