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>

我无法直接链接到overlay div，我想在点击div和链接后重定向到尊重的url，当用户点击链接时，它应该重定向到特定的url。但是如果用户点击一边，那么它应该重定向到设置为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()在锚点上。您当前正在使用 return false ，这可以防止锚点的默认行为发生。通过停止锚点上的传播，它可以防止事件冒泡到祖先元素。

event.stopPropagation（）


返回：说明：阻止事件发生     冒泡DOM树，阻止任何父处理程序     通知了这一事件。

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

由于您使用ajax作为锚点，因此可以使用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;  
});

Answer 2

你不能停止传播“a”或他们将停止工作.. 尝试：

$('.overlay').click(function(event) {
   event.preventDefault();
   if(event.target.localName != 'a'){
       window.location.href = $(this).attr('data-url');
   }
});

不是用于阻止触发父事件的选择器

2 个答案: