javascript - 当事件设置为外部元素时，如何检测另一个元素内部的元素？

Question

这是我的代码:

$("div").on('click', function(e){
  
    e.preventDefault(e);

  /*
  if ( clicked element is <a> element ){
  
    redirect to the href
    and return false
    
  }
  */
  
  alert("div clicked");
  
})

div{
  cursor: pointer;
  border: 1px solid;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
  <p>this is a paragraph</p>
  <a href="/url">this is a link</a>
  <p>this is another paragraph</p>
</div>

我怎样才能让那个条件(在上面的代码中有注释)工作？我需要检测是否在 <div> 中单击了元素是 <a> ，然后重定向到它并死去。我该怎么做？

Answer 1

您可以使用e.target 来获取被点击的元素。要检查点击了什么标签，您可以使用 e.target.tagName

$("div").on('click', function(e) {

  e.preventDefault(e);

  if ( e.target.tagName === 'A' ) {
      var href = $(e.target).attr('href');
      console.log(href);
  }

  //e.target.tagName - Will return 'A' if <a> is clicked.

})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
  <p>this is a paragraph</p>
  <a href="/url">this is a link</a>
  <p>this is another paragraph</p>
</div>