如何在ion-tab组件上实现点击打开外部链接功能

ion-tab组件默认内置了标签页路由切换逻辑，会优先拦截原生点击事件执行内部跳转，所以直接绑定onClick不会像ion-item那样正常触发自定义逻辑，可通过以下方法解决：

方案1：阻止ion-tab的默认点击行为 #

直接在点击事件里先调用event.preventDefault()禁用默认的路由跳转，再执行你的打开外部链接逻辑，修改代码如下：

<ion-tab class="item-icon-right" id="boironMedicineFinder2-list-item1368" href-inappbrowser="https://www.boironusa.com/medicines/" onClick="event.preventDefault(); openExternal(this);">Boiron Shop
  <i class="icon ion-ios-cart-outline"></i>
</ion-tab>

如果是基于Angular/Vue/React的Ionic项目，对应写法调整为：

• Angular：<ion-tab (click)="$event.preventDefault(); openExternal($event.target)" ...>
• Vue：<ion-tab @click.prevent="openExternal($event.target)" ...>
• React：<ion-tab onClick={(e) => {e.preventDefault(); openExternal(e.target)}} ...>

方案2：将点击事件绑定到ion-tab内部元素 #

如果方案1无效，可以不在ion-tab本身上绑定事件，改为在ion-tab内部嵌套的可见元素上绑定点击事件，避免被ion-tab的默认逻辑拦截：

<ion-tab tab="shop">
  <span slot="label" class="item-icon-right" href-inappbrowser="https://www.boironusa.com/medicines/" onClick="openExternal(this)">
    Boiron Shop
    <i class="icon ion-ios-cart-outline"></i>
  </span>
</ion-tab>

额外校验 #

确认你的openExternal函数逻辑符合预期，示例正确写法参考：

function openExternal(el) {
  const targetUrl = el.getAttribute('href-inappbrowser')
  // 调用系统外部浏览器打开，如果你用Cordova/Capacitor的InAppBrowser插件，_system参数会唤起系统自带浏览器
  window.open(targetUrl, '_system', 'location=yes')
}

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