Question

我有一个覆盖div，它覆盖显示结果的容器div。但是当我点击叠加层时，它必须消失。

所以，我尝试在叠加div上设置pointer-events: none;。但我的问题是叠加层上的点击事件现在不起作用。

实施此方法的最佳方法是什么？

<div class="overlay container" id="main-div">
  <div id="results-div">
  #Image results are shown and have some events binded to it.
  </div>
</div>


$("#main-div").click(function(){
 #Some events related to it    
});

Answer 1

我猜你可以用这个简单的功能实现你想要的东西：

$(document).ready (function () {
  $('.overlay').click(function () {
     $('#pop').fadeOut();
  })
})

但为此，您需要对HTML和CSS进行更改：

<div id="pop">
  <div class="overlay" id="main-div"></div>
  <div id="results-div">
    #Image results are shown and have some events binded to it.
  </div>
</div>

检查此演示以查看整个样式 http://jsfiddle.net/USk7U/

Answer 2

从您的CSS中删除pointer-events: none后，这不起作用吗？

$('#main-div').click(function(ev) {
  ev.preventDefault();
  // do stuff
  $(this).hide();
});

我假设您在任何地方点击时都试图隐藏#main-div，对吗？

另外，您确定在显示dom元素后绑定事件吗？如果没有，您可以尝试jQuery's on method：

$('body').on('click', '#main-div', function(ev) { ... } );

Answer 3

$("#main-div").click(function(event){
  if($(event.target).is(".overlay")){
    event.preventDefault();
    $(this).removeClass("overlay")
  }else{
    $(this).addClass("overlay");
  }
});

如果target有覆盖类，则删除它，否则只需添加它。

不要添加/删除指针事件，因为不想永远禁用click。

停止覆盖下的所有事件

3 个答案: