javascript - 如果有人点击末尾包含主题标签的网址，如何编写 JavaScript 条件

Question

如果访问者单击末尾包含主题标签的网址，如何在网页上触发 JavaScript 条件。例如，如果我单击 anchor 标记，即 abc.com/page.html#，则条件运行并返回 true。

我尝试执行以下操作

if (document.querySelector("a[hash='"+hashValue+"']").click() ) 
// do something;

但它不起作用。有什么线索吗？

Answer 1

向窗口添加一个事件监听器(文档、正文或包含所有链接的任何其他元素也将起作用)，检查该元素是否为 anchor 并在其上使用 String#endsWith href。

addEventListener("click", function(event) {
  if (event.target instanceof HTMLAnchorElement && event.target.href.endsWith("#")) {
    console.log("Hash");
  }
});

<a href="about:blank" target="_blank">Test without #</a>
<a href="about:blank#test" target="_blank">Test with #</a>
<a href="about:blank#" target="_blank">Test with hash at end#</a>
<button>Invalid Button 1</button>
<button href="about:blank#">Invalid Button 2</button>

您还可以向每个以 # 结尾的 anchor 元素添加事件监听器(仅当您不向页面动态添加更多链接时才有效):

function onAnchorClick(event) {
  console.log("Hash");
}

for (var anchor of document.querySelectorAll("a[href$='#']")) {
  anchor.addEventListener("click", onAnchorClick);
}

<a href="about:blank" target="_blank">Test without #</a>
<a href="about:blank#test" target="_blank">Test with #</a>
<a href="about:blank#" target="_blank">Test with hash at end#</a>
<button>Invalid Button 1</button>
<button href="about:blank#">Invalid Button 2</button>

以下是有关如何选择包含某些属性的项目的一些注释:

• 属性等于[propertyName="fullPropertyValue"]
• 属性不等于:not([propertyName="fullPropertyValue"])
• 属性以 [propertyName^="startValue"] 开头
• 属性不以 开头:not([propertyName^="startValue"])
• 属性包含[propertyName*="partValue"]
• 属性不包含 :not([propertyName*="partValue"])
• 属性以 [propertyName$="endValue"] 结尾
• 属性不以 结尾:not([propertyName$="endValue"])