HTML锚点对象alert显示异常及自定义点击并阻止默认跳转

嘿，我来帮你搞定这两个问题！咱们一步步来拆解：

一、为什么alert锚点显示的是完整路径，而不是Anchor对象？ #

这是因为HTMLAnchorElement（锚点元素）的toString()方法被浏览器重写了，默认返回的是它的绝对URL（也就是你看到的C:\Users...\html\pag1这种），而<p>元素用的是Object原型的toString()，所以会显示[object HTMLParagraphElement]。

如果想看到锚点对象本身的信息，你可以：

• 用console.log(anchors[i])代替alert，在浏览器控制台里能直接查看完整的DOM对象；
• 如果一定要用alert看类型，可以调用原型上的toString方法：

  alert(Object.prototype.toString.call(anchors[i]));
  

  这样会弹出[object HTMLAnchorElement]，就能确认这是锚点对象了。

二、如何阻止锚点点击后跳转，且能自定义首次点击行为？ #

要覆盖默认的跳转行为，核心是阻止浏览器的默认事件，结合你的需求（首次自定义，之后恢复跳转），推荐下面的实现：

方法1：使用event.preventDefault()+状态标记 #

这是最灵活的方式，既能阻止跳转，又能保留事件冒泡（如果需要的话）：

var anchors = document.querySelectorAll('a'); 

for (var i = 0; i < anchors.length; ++i) {
  // 给每个锚点单独标记是否是首次点击
  let isFirstClick = true;
  
  anchors[i].onclick = function(e) {
    if (isFirstClick) {
      // 阻止默认跳转行为
      e.preventDefault();
      // 这里写你的首次点击自定义逻辑
      alert(`首次点击锚点：${this.textContent}`);
      // 切换状态，下次点击就执行默认跳转
      isFirstClick = false;
    }
    // 非首次点击时，不阻止默认行为，自动跳转到href指向的页面
  };
}

方法2：返回false（简单但不够灵活） #

如果不需要考虑事件冒泡，也可以直接在函数里返回false，同样能阻止跳转：

anchors[i].onclick = function() {
  if (isFirstClick) {
    // 自定义逻辑
    console.log("首次点击");
    isFirstClick = false;
    return false; // 阻止默认跳转+阻止冒泡
  }
  return true; // 之后允许跳转
};

额外说明：如果之后想完全恢复默认行为 #

如果后续需要取消自定义的点击逻辑，直接把onclick设为null即可：

anchors[i].onclick = null;

内容的提问来源于stack exchange，提问作者Eduard6421