覆盖容器应在单击时关闭，但如果单击锚点或输入子项则不会

Question

可能比较简单，但找不到合适的解决方案：

    <!-- newsletter -->
    <div id="newsletter-overlay" class="blur-overlay">
      <button type="button" class="close-btn">x</button>
      <div class="inner-wrap"> 
        <!-- Newsletter Form -->
        <div id="newsletter-form">
          <form action="/newsletter" method="post" class="group">
            <input type="text" name="email" id="email" placeholder="E-Mail Address" autocomplete="off">
            <input type="submit" name="submit" id="submit" class="button2" value="Signup">
            <div class="messages"> <span class="error-message">Please enter a valid E-Mail Address.</span> <span class="success-message">Thank you for your signup.</span> </div>
          </form>
        </div>
        <!-- /Newsletter Form --> 
      </div>
    </div>
    <!-- /newsletter -->

我的 JS 看起来像这样……

    $('.blur-overlay').on('click', function(e) {
        console.log('clicked')
        e.preventDefault();
        $('.blur-overlay').fadeOut(150);
    });

叠加层 position: absolute; width: 100%; height: 100% 位于所有内容之上。我希望覆盖层在单击后关闭，但如果单击覆盖层内的 a 或 input 则不希望发生这种情况。

我想到了类似的方法，但这不起作用。

    $('.blur-overlay *').not('input, a').on('click', function(e) {
        console.log('clicked')
        e.preventDefault();
        $('.blur-overlay').fadeOut(150);
    });

有什么想法吗？谢谢

Answer 1

$('.blur-overlay').on('click', function(e) {
    console.log('clicked')

// check if click was on the overlay and not on its children
    if (e.target == this) {
    $('.blur-overlay').fadeOut(150);
}
});

覆盖容器应在单击时关闭，但如果单击锚点或输入子项则不会

Overlay container should close on click but not if a anchor or input child is clicked

html

css

jquery

overlay