Ionic5中ion-reorder列表项点击事件不触发问题

当ion-reorder-group组件的disabled属性为false（即开启拖拽排序模式）时，组件内部会注册高优先级的拖拽手势监听器，用于识别拖拽排序动作。为了防止拖拽过程中误触元素点击事件，框架会在ion-reorder容器层级拦截默认的点击事件冒泡，直接将click事件绑定在ion-reorder标签上时，事件会被手势逻辑吞掉，无法触发对应的处理函数。
另外还有一个容易忽略的属性绑定坑：如果在Angular/React/Vue等框架中直接写disabled="false"而非框架的动态属性绑定（比如Angular的[disabled]="false"），传入的会是字符串类型的"false"，组件将其转为布尔值时会判定为true，也可能导致组件行为和预期不一致。

• 优先调整事件绑定位置：将点击事件从ion-reorder标签移到内部的ion-item或更内层的可交互元素上。拖拽手势的事件拦截仅作用在ion-reorder容器层级，内层元素的点击事件可以正常触发，改造成本最低。
  修正后的代码示例：

  <ion-reorder-group (ionItemReorder)="onRenderItems($event)" [disabled]="false">
    <ion-reorder>
      <ion-item>
        <ion-label>Item 7</ion-label>
      </ion-item>
    </ion-reorder>
  
    <ion-reorder>
      <!-- 点击事件绑定到内部ion-item上 -->
      <ion-item (click)="itemClick()">
        <ion-label>Item 8</ion-label>
      </ion-item>
    </ion-reorder>
  </ion-reorder-group>
  

• 如果业务场景必须在ion-reorder层级绑定点击事件，可以自行添加手势判定逻辑：通过监听触摸/鼠标按下、抬起的坐标差和按压时长，区分拖拽动作和普通点击动作，判定为有效点击时再执行对应业务逻辑。这种方案实现复杂度更高，非必要不推荐。

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