Prevent parent <a> tag on clicking inner div class name

问题: 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/t...

问题:

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>


回答1:

Use event.preventDefault(); to make prevent default events (such as links in your case)

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

and then, you can redirect with window.location = "url" instead of a tags if you want to go to another link.

  • 发表于 2019-03-22 01:51
  • 阅读 ( 167 )
  • 分类:sof

条评论

请先 登录 后评论
不写代码的码农
小编

篇文章

作家榜 »

  1. 小编 文章
返回顶部
部分文章转自于网络,若有侵权请联系我们删除