javascript - how to stop redirection of parent href tag when clicked on child div? - Stack Overflow

admin管理员组

文章数量:1312763

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 ?

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 ?

• javascript
• jquery
• html
• css
• href

Share Improve this question Follow asked Jul 13, 2014 at 19:22 Dev ManDev Man 2,13733 gold badges2424 silver badges4040 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 8

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();
  console.log($(this).data('id'))
})

<script src="https://cdnjs.cloudflare./ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<a href="blah.html" class="re-direct">
  <div class="1div"></div>
  <div class="2div">
    <div class="click" data-id="text">click</div>
  </div>
</a>

本文标签： javascripthow to stop redirection of parent href tag when clicked on child divStack Overflow