点击超链接与地址栏输入URL的浏览器行为差异排查

这个问题的核心在于HTML规范里其实不允许在<a>标签内嵌套<button>元素，浏览器处理这种嵌套结构时会出现行为不一致的情况——按钮的默认交互行为会干扰链接的正常跳转，导致URL参数没有被正确传递，而直接在地址栏输入URL则不会有这种冲突。

这里有两个可靠的解决方案：

方案1：用CSS模拟按钮样式（推荐） #

放弃嵌套结构，直接给<a>标签添加按钮样式，这样既保留链接的原生跳转行为，又能实现按钮的视觉效果：

<!DOCTYPE html>
<html>
<head>
<style>
.button-link {
  display: inline-block;
  padding: 8px 16px;
  background-color: #ddd;
  border: 1px solid #ccc;
  border-radius: 4px;
  text-decoration: none;
  color: #333;
  cursor: pointer;
}
.button-link:hover {
  background-color: #ccc;
}
</style>
</head>
<body>
<a href="https://view-awesome-table.com/-L1O9CTIgXRslCew09ji/view?filterA=Citrus" target="_blank" class="button-link">BUTTON 2</a>
</body>
</html>

方案2：阻止按钮默认行为并手动触发跳转 #

如果你一定要保留<button>元素，可以通过JavaScript阻止按钮的默认行为，然后手动触发链接的跳转：

<!DOCTYPE html>
<html>
<body>
<button type="button" onclick="window.open('https://view-awesome-table.com/-L1O9CTIgXRslCew09ji/view?filterA=Citrus', '_blank')">BUTTON 2</button>
</body>
</html>

或者用更优雅的事件绑定方式（避免内联JS）：

<!DOCTYPE html>
<html>
<body>
<button type="button" id="btn-2">BUTTON 2</button>

<script>
document.getElementById('btn-2').addEventListener('click', function() {
  window.open('https://view-awesome-table.com/-L1O9CTIgXRslCew09ji/view?filterA=Citrus', '_blank');
});
</script>
</body>
</html>

两种方案都能让点击行为和直接在地址栏输入URL的效果一致，推荐第一种方案，因为它更符合HTML语义化规范，不需要额外的JS代码。

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