jquery - 不是用于防止触发父事件的选择器

Question

我有以下html代码

<div class="overlay" data-url="http://www.example1.org">
   Lorem ipsum dolor sit amet, consectetur adipisicing elit

   <a class="link1 clickThis" href="http://www.example2.org">
     first link
  </a>
  <a class="link2 clickThis" href="http://www.example3.org">
     Second link
  </a>`
</div>

我不能直接链接到覆盖 div，我想在单击 div 和链接后重定向到受尊重的 url，当用户单击链接时，它应该重定向到特定的 url。但是如果用户点击 a 的外侧，那么它应该重定向到设置为 data-url 属性的 url。

所以我写了这段 JQuery 代码

$('.overlay').click(function(event) {
        event.preventDefault();
        window.location.href = $(this).attr('data-url');
    }).children('a').click(function(event) {
         return false;  
    });

// methods call on link click
$(document).on('click', '.clickThis', function(event) {
event.preventDefault();
$.ajax({
        url: $(this).attr('href'),
        type: 'GET',
        data: {
            param1: 'value1'
        },
    })
    .done(function() {
        console.log("success");
    })
});

但是点击链接后这不起作用

也试过了

$('.overlay:not(.link1,.link2)').click(function(event) {
        event.preventDefault();
        window.location.href = $(this).attr('data-url');
    });

请指定正确答案。谢谢。

Answer 1

您需要stopPropagation()在 anchor 上。您当前正在使用 return false 来防止 anchor 的默认行为发生。通过停止 anchor 上的传播，它可以防止事件冒泡到祖先元素。

event.stopPropagation()

Returns: Description: Prevents the event from bubbling up the DOM tree, preventing any parent handlers from being notified of the event.

$('.overlay').click(function(event) {
      window.location.href = $(this).attr('data-url');
 }).children('a').click(function(event) {
      event.stopPropagation();
 });

由于您使用 ajax 作为 anchor ，您可以使用 return false 或 stopPropagation() + preventDefault()

$('.overlay').click(function(event) {
    event.preventDefault();
    window.location.href = $(this).attr('data-url');
}).children('a').click(function(event) {
    $.ajax({
        url: $(this).attr('href'),
        type: 'GET',
        data: {
            param1: 'value1'
        },
    }).done(function() {
        console.log("success");
    })
    return false;  
});