具有可点击的背景 div 但不包括前景 div [英] Having a clickable background div but excluding foreground divs

问题描述

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

<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?

谢谢！！

解决方案

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

$('#site_background_container').on('click', function(e) {if (e.target !== this) {返回;}alert('点击了site_background_container');});

看看下面的片段:

$('#site_background_container').on('click', function(e) {if (e.target !== this) {返回;}alert('点击了site_background_container');});

#site_background_container {背景:#ff0；填充:20px；}#site_main_container {背景:红色；白颜色;填充:10px；显示:内联；}

<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;">站点主容器

希望这会有所帮助！

I have a page where I have to make the background be a clickable link, whilst having the foreground works okay. I managed to get the background clickable this way:

<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;">

The problem is that now the site_main_container div is also clickable. How can I limit the click-ability to only site_background_container?

Thanks!!

解决方案

Use jQuery. If the e.target is the same element as this, you've not clicked on a descendant.

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

Have a look at the snippet below:

$('#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>

Hope this helps!

这篇关于具有可点击的背景 div 但不包括前景 div的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！