可点击的背景div上显示链接打开两个链接

我在每张幻灯片上都使用带有背景图像的引导程序传送带。每张幻灯片都有显示在其上的链接。我已经回顾了一些关于SO的答案，但似乎没有解决这个问题。以下是在传送带上滑动的样子：可点击的背景div上显示链接打开两个链接

  <div class="item"> 
       <div class="banner-link"> 
        <img src="myimage.jpg" height="486" width="1024" alt="image-description"> 
        <div class="holder"> 
         <div class="block"> 
          <div class="links"> 
           <strong class="title">The links</strong> 
           <a href="/about/" class="btn btn-default">About Us</a> 
           <a href="/contact/" class="btn btn-default">Contact</a> 
          </div> 
         </div> 
        </div> 
        <input type="hidden" name="link" readonly value="http://www.google.com/" /> 
       </div> 
      </div>

的jQuery：

$(document).ready(function() { 
    $('div.banner-link').click(function() { 
     if ($(this).find("input").length) { 
      window.open($(this).find("input:first").val(),'_blank'); 

     } 
    }); 
});

我的问题是，当我点击任何一个子环节，无论是子链接和背景图像链接被点击。子链接在主选项卡中打开，后台jQuery点击事件在新选项卡中打开。

我试过z-index的一些东西，但它没有解决我的问题。我怎样才能让背景图像在任何地方点击，但在子链接上？

任何帮助表示赞赏。

来源

2015-10-16 Drew

请发布您的jsfiddle。 – Alex

发生这种情况是因为您的JavaScript仅限于div.banner-link和div.banner-link内的任何内容。如果没有工作版本的代码来查看（就像你看到的那样），我们可以做的事情很少，但是如果你点击一个图像，你希望1个链接打开，如果你点击一个按钮，你希望打开另一个链接。 –

提交了一个答案，因为我想通过在本地创建页面来实现您想要实现的目标。 –

如果我很理解你的文章，你想让点击链接而没有背景被点击的权利是可能的吗？

如果是这样，你应该看看stopPropagation函数（这里是文档：http://www.w3schools.com/jquery/event_stoppropagation.asp），如果没有，我想我误解了。

祝您有美好的一天！

来源

2015-10-16 14:12:57

我想他想点击图片以及链接。如果他点击图片，它应该打开一个新标签页，其中隐藏字段中的链接。 – Snm

我需要能够点击子链接而不触发背景图片的点击事件。这是我错过的。谢谢！ – Drew

我不同意这个答案，因为虽然它确实阻止了继续到父项的点击，但它并不能解决JavaScript做得比应该更多的问题。你已经编写了javascript来处理div的任何子节点，然后阻止它通过破坏传播来做你所要求的。 –

如果您只想在单击图像时打开新链接，则需要将点击事件更改为仅在单击图像时触发，然后查找此父项而非此项。

$(document).ready(function() { 
    $('div.banner-link img').click(function() { 
     if ($(this).parent().find("input").length) { 
      console.log($(this).parent().find("input:first").val()); 
     } 
    }); 
});

你也许可以清理它，我改变它登录到控制台，因为打开一个新窗口进行测试非常烦人。与您通过两个不同的div提供的代码一起工作。

编辑，有很多的话：

所以这$（本）对象将是该项目的点击量。我们已经将元素定义为任何div中具有banner-link类的img标签。 $（this）成为img对象，但我们希望然后罚款隐藏的输入（不移动它）。要做到这一点，你做$（this）.parent（）来获得相关的div.banner-link，如果你不这样做，你会得到任何/所有的div.banner-link由于有多个在页面上。现在你处于正确的位置，你可以像平常一样继续寻找第一个输入并获得它的价值。

希望这会有所帮助！

来源

2015-10-16 14:28:06

可点击的背景div上显示链接打开两个链接

回答

相关问题