javascript - Ionic 3 - Pan 事件在手机上丢失 "target"

Question

我正在使用 Ionic 3 并尝试制作一个简单的 5 星评级元素。我想实现的一个很酷的功能是通过滑动/平移来更改评级，类似于 ionic 范围的工作方式，但没有栏或旋钮，只有星星在用户滑过它们时亮起。

我尝试使用平移手势并将 $event 作为参数传递，并检查 $event 的目标字段中元素的 id，例如

$event.target.id

并为每颗星分配一个从 1 到 5 的相应 ID。

在浏览器中测试它工作得很好，但在我的手机中却不行，我检查了整个 $event.target 对象，它充满了未定义的值:(它只在第一个平移事件被触发时改变，所有后续的平移在我释放触摸之前停止工作。

这是一个错误吗？或者对此有任何解决方法吗？

附加信息:

HTML(没有样式相关属性):

<ion-grid (pan)="ratingChanged($event)">
        <ion-row>
            <ion-col *ngFor="let i of [1,2,3,4,5]">
                <ion-icon [name]="(rating >= i)?'star':'star-outline'" [id]="i"></ion-icon>
            </ion-col>
        </ion-row>
    </ion-grid>

TS:

ratingChanged(ev) {
    if (ev && ev.target && ev.target.id)
        this.rating = +ev.target.id; //id comes as a string
}

---

编辑:@Sergey Rudenko 的建议解决了这个问题，我是这样实现的:

HTML:

<ion-grid (pan)="ratingChanged($event)">
    <ion-row>
        <ion-col *ngFor="let i of [1,2,3,4,5]">
            <ion-icon [name]="(rating >= i)?'star':'star-outline'" [id]="'star' + i"></ion-icon>
        </ion-col>
    </ion-row>
</ion-grid>

TS:

ratingChanged($ev) {
    let id: string = document.elementFromPoint($ev.center.x, $ev.center.y).id;
    if (id.match(/star\d/))
        this.rating = +id.match(/star(\d)/)[1];
}

Answer 1

所以对此有几点理解:

1. (pan) 是 hammer.js 的一个抽象事件，它在底层为两种类型的指针(鼠标和触摸)使用相关的 mousedown、mousemove 或 touchstart touchmove 等核心事件

2. 鼠标事件目标使用以下逻辑:

   • mouse start 的 event.target 获取它所在的元素(就 DOM 树而言最远的元素)，然后当您移动鼠标时，每个 mousemove 事件都会获取新的目标，因为设计是您用鼠标“悬停”在上面，因此mousemove 的event.target 开始一直获取新的target

3. 触摸事件目标有不同的逻辑:

   • event.target 将返回“undefined”，因为带有触摸事件的事件目标信息“埋藏”在 event.touches[0].target 中，第一个触摸点触摸屏幕等等。
   • 另一件事是，对于 touchmove 事件，您可以在四处移动时“持续”按下屏幕，因此与更像是“悬停”的 mousemove 不同，对于 touch，您可以“始终拖动”。因此对于触摸事件 - 事件对象将始终跟踪在触摸开始期间获取的第一个元素。
   • 因此通常开发人员使用不同的浏览器 api 来获取位于 touchmove 指针下的目标:document.elementFromPoint(event.clientX, event.clientY);

现在将所有这些结合在一起:基本上你需要编写代码来“检测”发生了什么交互(触摸或鼠标)，基于使用适当的事件目标“路由”(对鼠标和事件使用 event.target.etc .touches[0].target for touch)，然后当你四处移动指针时，实现从指针坐标检查元素。

我建议查看这篇文章 b Josh:https://www.joshmorony.com/building-an-absolute-drag-directive-in-ionic-2/

我看到您可以潜在地利用 pan 自己的事件抽象来获取两种类型指针的 ev.center.x 坐标，然后这些坐标可以与 elementFromPoint 浏览器 api 一起使用。

让我知道这是否有帮助。如果您分享更多代码，我可以帮助实现。