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

Question

Here is my code:

 $("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> 

How can I make that condition (which is commented in code above) working? I need to detect if the clicked element inside <div> is a <a> , then redirect to it and die. How can I do that?

Answer 1

You can use e.target to get the clicked element. To check what tag is clicked, you can use 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>