阻止父级<a> tag on clicking inner div class name

Question

On clicking favicon-wrapper I need to add class selected. However the <a> tag on top not allowing me to click the favicon. Before it triggers it goes to the "offers/test-global.html" page.

How can I prevent parent the <a> tag redirection if the user clicks on favicon-wrapper?

$('.favicon-wrapper').on('click', function() {
  $(this).addClass('selected');
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<a href="offers/test-global.html" class="offer-list-item-wrapper">
  <div class="offer-list-item">
    <div class="offer-info">
      <div class="offer-text">
        <h4 class="title">Test
          <a href="javascript:void(0);" class="d-flex">
            <div class="favicon-wrapper">
              <img src="https://image.flaticon.com/icons/svg/1497/1497720.svg" />
            </div>
          </a>
        </h4>
      </div>
    </div>
  </div>
</a>

Answer 1

使用event.preventDefault();防止发生默认事件（例如您所关注的链接）

$('.favicon-wrapper').on('click', function(event){
    event.preventDefault();
    $(this).addClass('selected');
});

然后，如果要转到另一个链接，可以使用window.location = "url"而不是a标签进行重定向。