有一个可点击的背景div但不包括​​前景div

Question

我有一个页面，我必须使背景成为可点击的链接，同时让前景工作正常。我设法通过这种方式点击背景：

<div id="site_background_container" onclick="window.location.href='{{$background_link}}'" style="position:relative; z-index:-100; cursor:pointer;">

<div id="site_main_container" style="z-index:5;">

问题是现在site_main_container div也是可点击的。如何将点击次数限制为仅site_background_container？

谢谢！

Answer 1

使用jQuery。如果e.target与此元素相同，则表示您没有点击后代。

$('#site_background_container').on('click', function(e) {
  if (e.target !== this) {
    return;
  }
  alert('clicked the site_background_container');
});

请看下面的代码段：

$('#site_background_container').on('click', function(e) {
  if (e.target !== this) {
    return;
  }
  alert('clicked the site_background_container');
});

#site_background_container {
  background: #ff0;
  padding: 20px;
}

#site_main_container {
  background: red;
  color: white;
  padding: 10px;
  display: inline;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<div id="site_background_container">
  <div id="site_main_container" style="z-index:5;">
    Site Main Container
  </div>
</div>

希望这有帮助！