how to stop redirection of parent href tag when clicked on child div?

问题

i have the following structure

Code

 <a href="blah.html" class="re-direct">
    <div class="1div"></div>
    <div class="2div">
       <div class="click" data-id="text">click</div>
    </div>
 </a>
 <script>
  $(document).on('click',".click",function(){ alert($(this).data('id')) })
 </script>

the above code works fine but it redirects to the page blah.html how do i stop it from redirecting ?

回答1:

You need to stop the propagation of the click event up the DOM to the a element, and also prevent the default behaviour of the link:

$(document).on('click', ".click", function(e) { 
    e.stopPropagation();
    e.preventDefault();
    alert($(this).data('id')) 
});

Example fiddle

来源：https://stackoverflow.com/questions/24726358/how-to-stop-redirection-of-parent-href-tag-when-clicked-on-child-div