javascript - 是否可以在点击处理程序之外阻止默认的浏览器 anchor 行为？

我利用页面锚创建了一个选项卡式界面。这是一个问题，因为默认情况下，在同一页面上单击链接到锚的链接时，浏览器会导航到该锚：

showTab = function(tabName) {
  tabName = tabName.replace(" ", "_"); //Fix space in tab name so that JS can use it.
  $(".tab_selected").addClass("tab");
  $("#p_" + document.querySelector(".tab_selected").id).hide();
  $(".tab_selected").removeClass("tab_selected");
  $("#" + tabName).addClass("tab_selected");
  $("#p_" + tabName).show();
  location.hash = tabName;
  document.title = tabName.replace("_", " ") + " | AnED";
}

//if (location.hash.length < 1)
//  showTab("Information");

body {
  height:1200px;
}

.page_tabgroup {
	display:table;
	margin:0 auto;
	width:auto;
	margin-top:50px;
	border-radius:4px;
	background-color:#FFF;
	border:solid 2px rgba(0, 120, 255, 0.8);
}

.page_tabgroup > a {
	text-decoration:none;
	border:none;
}

.page_tabgroup > .tab {
	display:table-cell;
	padding:10px 20px 10px 20px;
	color:rgba(0, 120, 255, 0.8);
}

.page_tabgroup > .tab:hover, .primary_page > .page > .page_tabgroup > .tab_selected:hover {
	background-color:rgba(0, 120, 255, 0.95);
	border:inherit solid rgba(0, 120, 255, 0.6);
	color:#FFF;
}

.page_tabgroup > .tab_selected {
	display:table-cell;
	padding:10px 20px 10px 20px;
	color:#FFF;
	background-color:rgba(0, 120, 255, 0.8);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="page_tabgroup">
  <a href="javascript:showTab('Information')" class="tab tab_selected" id="Information">Information</a>
  <a href="javascript:showTab('Course_Dates')" class="tab" id="Course_Dates">Course Dates</a>
</div>

在上面的示例中，浏览器自动向下滚动，以便锚元素位于顶部。这是令人讨厌的行为，但不足为奇。我尝试在this answer到Avoid window jump to top when clicking #-links中使用preventDefault()，但是它没有任何作用。这可能是因为我没有使用点击处理程序（该功能通过javascript:showTab链接直接执行）。

使用单击处理程序会阻止showTab函数完全执行，并将其附加到showTab(e.id);会为Cannot read property 'replace' of undefined的第2行创建一个showTab错误：

$(".tab_selected").click(function(e) {
    e.preventDefault();
});

$(".tab").click(function(e) {
    e.preventDefault();
});

是否可以在点击处理程序之外阻止默认锚定行为？如果没有，我该如何解决？

最佳答案

您必须采取不打扰的方式。


删除href和javascript:。他们很老。
使用正确的jQuery初始化事件监听器的方法。
使用history.pushState(stateObj, "page", "url");以正确的方式更改哈希。

$(function () {
  $("a.tab").click(function(e) {
    e.preventDefault();
    var tabName = this.id;
    tabName = tabName.replace(" ", "_"); //Fix space in tab name so that JS can use it.
    $(".tab_selected").addClass("tab");
    $("#p_" + document.querySelector(".tab_selected").id).hide();
    $(".tab_selected").removeClass("tab_selected");
    $("#" + tabName).addClass("tab_selected");
    $("#p_" + tabName).show();
    // location.hash = tabName;
    document.title = tabName.replace("_", " ") + " | AnED";
    return false;
  });
});

body {
  height:1200px;
}

.page_tabgroup {
  display:table;
  margin:0 auto;
  width:auto;
  margin-top:50px;
  border-radius:4px;
  background-color:#FFF;
  border:solid 2px rgba(0, 120, 255, 0.8);
}

.page_tabgroup > a {
  text-decoration:none;
  border:none;
}

.page_tabgroup > .tab {
  display:table-cell;
  padding:10px 20px 10px 20px;
  color:rgba(0, 120, 255, 0.8);
}

.page_tabgroup > .tab:hover, .primary_page > .page > .page_tabgroup > .tab_selected:hover {
  background-color:rgba(0, 120, 255, 0.95);
  border:inherit solid rgba(0, 120, 255, 0.6);
  color:#FFF;
}

.page_tabgroup > .tab_selected {
  display:table-cell;
  padding:10px 20px 10px 20px;
  color:#FFF;
  background-color:rgba(0, 120, 255, 0.8);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="page_tabgroup">
  <a href="#" class="tab tab_selected" id="Information">Information</a>
  <a href="#" class="tab" id="Course_Dates">Course Dates</a>
  <a href="#" class="tab" id="Home_Study">Home Study</a>
  <a href="#" class="tab" id="In-House">In-House</a>
</div>

关于javascript - 是否可以在点击处理程序之外阻止默认的浏览器 anchor 行为？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/43610825/