Question

我有这个HTML：

<a href="index.php?register=reg"><img src="button2.png" id="button2"></a>

我有这个脚本：

$("#button2").on('click', function(e){ 
  $("#button2").css("display","none"); 
  $("#main").css("display","none"); 
  $("#register").css("display","block"); 
});

链接有效，但脚本没有。

Answer 1

您需要阻止事件从“按钮”传播到链接：

$("#button2").on('click', function(e){ 
  e.stopPropagation(); // <======== This is the change
  $("#button2").css("display","none"); 
  $("#main").css("display","none"); 
  $("#register").css("display","block"); 
});

如果您没有停止传播事件，它会到达链接，浏览器会照常跟踪链接。

请注意，还有其他方法可以触发该链接，而不是单击其上方的图像;您可以考虑在链接上而不是在“按钮”上挂钩事件并使用e.preventDefault()代替（以防止默认行为，即遵循链接）。再说一次，拥有一个你永远不希望他们点击的真正链接似乎很奇怪......

BenM认为您希望遵循该链接，但只有在用户看到您正在进行的更改之后。你可以这样做，虽然它会引起用户尝试做的不必要的延迟：

$("#button2").on('click', function(e){ 
  var link = this.href;
  e.stopPropagation();
  $("#button2").css("display","none"); 
  $("#main").css("display","none"); 
  $("#register").css("display","block");
  setTimeout(function() {
    window.location = link;
  }, 500); // 500ms = half a second, adjust as desired
});

Answer 2

如果在隐藏/显示元素后需要遵循链接，您可以尝试：

$("#button2").on('click', function(event){ 
  event.stopPropagation();
  var linkurl =  $(this).attr("href");
  $("#button2").hide(function() {
    $("#main").hide(function() {
      $("#register").show(function() {
        window.location.href = linkurl;
      });
    });
  }); 
});

由于我们已使用event.stopPropagation();，因此我们还使用window.location.href导航到新页面。

如何在<a> tag work when the link is clicked?</a>上制作脚本

2 个答案: