Angular复杂路由参数搭配link href实现卡片支持中键开新页的解决方案

解决思路 #

你遇到的核心问题是绝对定位的<a>标签盖在卡片上层，拦截了所有点击事件，导致下层卡片绑定的ng-click不会触发，同时左键点击时<a>的默认跳转行为会优先执行。只需要调整事件绑定逻辑，区分点击类型分别处理即可。

具体实现步骤 #

1. 将点击事件绑定到上层的<a>标签上，而非下层卡片
2. 在事件回调中判断点击类型，仅阻止左键常规点击的默认跳转行为，保留中键、Ctrl/Command+左键的新标签页打开能力

调整后的代码 #

JS代码

// 新增$event参数接收事件对象
const openDocument = function ($event) {
  // 判断是普通左键点击（非中键、未按Ctrl/Command键）
  if ($event.button === 0 && !$event.ctrlKey && !$event.metaKey) {
    // 阻止a标签默认跳转
    $event.preventDefault();
    console.log('open doc in the same tab using custom router params');
    // 这里继续执行你原来的同页路由逻辑，传入复杂参数
  }
  // 其余情况不做处理，浏览器会自动执行默认行为：中键/组合键点击在新标签页打开href链接
}

HTML代码

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>
<div class="container">
    <!-- 将ng-click绑定到a标签，传入$event对象，注意补全你自动生成的href属性 -->
    <a class="global-link" href="你的跳转路由" ng-click="openDocument($event)"></a>
    <div class="card-container">     
    </div>
<div>

CSS代码

原有CSS无需调整，保留你现有的层级和样式即可：

.container{
   background-color: gray;
   width:200px;
   height: 200px;
   padding: 30px;
}

.global-link{
  position: absolute;
  background-color:red;
  min-width: 230px;
  min-height: 230px;
  margin-left: -15px;
  margin-top: -15px;
 }

.card-container{
  background-color: green;
  width: 100%;
  height: 100%;
}

交互逻辑说明 #

该实现完全符合浏览器原生交互规则：

• 普通左键点击：走自定义JS逻辑，携带复杂参数同页跳转
• 中键点击、Ctrl+左键（Windows）/Command+左键（Mac）：走原生链接逻辑，在新标签页打开路由，符合你预期的无参数行为

内容的提问来源于stack exchange，提问作者César Castro Aroche