Question

我有一个div，在那个div中，有各种元素（h3，p，span，a等）。我使用jquery使整个div可以点击：

$(".play").click(function(){
   window.location=$(this).find("a.play-detail").attr("href"); 
   return false;
});

一切正常。除了我在DIV中有2个其他链接，我不能再访问它们了（DIV点击接管）。这是结构的一个例子：

<div class="play">
  <h3>Title</h3>
  <a>One link</a> <!-- not working!! -->
  <a class="play-detail">Link for the whole div</a>
</div>

感谢。

Answer 1

你可以这样做吗？

$(".play").click(function(e){
   if(e.target.nodeName != "A"){
     window.location=$(this).find("a.play-detail").attr("href"); 
     return false;
   }
});

Answer 2

您可以使用 e.stopPropagation() ：

$(".play").click(function(){
    window.location=$(this).find("a.play-detail").attr("href"); 
    return false;
});

$(".play a").click(function (e) {
    e.stopPropagation();
});

<强> Fiddle Demo

Answer 3

您要搜索的是事件目标，要检查这一点，首先必须获取jquery提供的事件对象。然后，您可以检查目标：

$(".play").click(function(e){
   if(!$(e.target).is('a')){ //this checks if the clicked element was an a tag
      window.location=$(this).find("a.play-detail").attr("href"); 
      return false;
   }
});

另外我不得不说使用这样的链接有点奇怪，但这取决于你。

Answer 4

您可以将event对象传递给处理程序，然后使用它来确定是否运行代码：

$('.play').click(function(event) {

   var $target = $(event.target); // this is the element which was clicked

   if ( $target.is('a') && !$target.hasClass('play-detail') ) {
     return; // don't execute any code beyond this point if the
             // target is an anchor without the 'play-detail' class
   }      

   event.preventDefault();
   window.location = $(this).find('a.play-detail').attr('href'); 


});

使DIV中的所有元素充当除其他链接之外的链接

4 个答案:

Here's a fiddle