Ionic 3中同一按钮/标签实现单击与长按功能求助

嘿，我来帮你搞定这个问题！你现在的问题是把单击和长按事件分别写在了两个不同的ion-col元素上，所以它们没法同时作用在同一个标签上。其实只要把两个事件绑定到同一个元素上就行啦，Ionic本身支持在同一个组件上共存(click)和(press)事件，而且会自动区分这两种操作。

修正后的HTML代码 #

你只需要把(click)和(press)事件放在同一个ion-col里，像这样：

<ion-col class="mystyle" (click)="handleClick()" (press)="handleLongPress()">
  <ion-label id="aa"> اَبَدًا </ion-label>
</ion-col>

对应的TS逻辑处理 #

建议把两个事件的处理函数分开写，这样逻辑更清晰（当然如果你的业务逻辑确实需要调用同一个函数也可以，但分开维护性更好）：

// 单击事件处理
handleClick() {
  console.log("单击动作触发");
  // 这里写你的单击业务逻辑
}

// 长按事件处理
handleLongPress() {
  console.log("长按动作触发");
  // 这里写你的长按业务逻辑
}

为什么这样可行？ #

Ionic的press事件默认是在按住元素超过500ms后触发，而click是快速点击（通常在200ms以内），框架内部已经做了事件区分：触发长按的时候不会同时触发单击，快速单击也不会触发长按，所以不用担心冲突问题。

如果你的长按逻辑需要阻止后续可能的默认行为，也可以在handleLongPress里添加$event.preventDefault()，不过一般情况下不需要额外处理。

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