Question

我使用带全屏覆盖的导航，由屏幕顶部固定位置的菜单按钮触发。这意味着当浏览器滚动到页面底部时可以打开叠加层。默认情况下，当单击菜单按钮时，脚本将使浏览器返回到页面顶部。因此，为了防止这种情况发生，我已经添加了“返回：false＆＃39;点击功能。

$(document).ready(function() {
  $('#trigger-overlay').click(function() {
    $('section.header header h1').toggleClass('change');
    $('section.header header h2').toggleClass('change');
    return false;
  });
});

但现在这意味着导航中的链接不会将浏览器返回到下一页的顶部。我猜我需要定位导航菜单中的链接以阻止这种情况发生，但我似乎无法让它发挥作用。

$(document).ready(function() {
  $('.overlay li a').click(function() {
    return true;
  });
});

Answer 1

一种可能的方法是检查实际点击的元素是否是“白名单”链接（或其后代）;如果没有，就不要做return false。以下是它的完成方式：

$('#trigger-overlay').click(function(evt) {
  $('section.header header h1').toggleClass('change'); 
  $('section.header header h2').toggleClass('change');

  var $target = $(evt.target);
  if ($target.closest('.overlay').length === 0) { // not inside overlay
    return false;
  }
});

使用JQuery防止链接返回false

1 个答案: