使用 JQuery 防止链接返回 false

Question

我正在使用带有全屏覆盖的导航，由屏幕顶部固定位置的菜单按钮触发。这意味着可以在浏览器滚动到页面底部时打开叠加层。默认情况下，当单击菜单按钮时，该脚本将使浏览器返回页面顶部。因此，为了防止这种情况发生，我在 click 函数中添加了“return: false”。

$(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;
  }
});