Question

我正在使用Ionic 3并尝试制作一个简单的5星级评分元素。我想实现的一个很酷的功能是滑动/平移以更改等级，类似于离子范围的工作原理，但是没有条或旋钮，当用户在其上方滑动时，只有星星会亮起。

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

$event.target.id

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

在浏览器中测试它是否可以正常工作，但在我的手机中却没有，我检查了整个$ event.target对象，并用未定义的值填充了它：（仅在触发第一个pan事件时更改，随后的所有pan在我松开触摸屏停止工作之前。

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

其他信息：

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

所以对此有一些理解：

（pan）是Hammer.js的抽象事件，它在幕后针对两种类型的指针（鼠标和触摸）都使用了相关的mousedown，mousemove或touchstart touchmove等核心事件
鼠标事件目标正在使用以下逻辑：
- mouse start的event.target获取它位于其上的元素（就DOM树而言是最远的），然后在移动鼠标时，每个mousemove事件都会获取新的目标，这是根据设计的原因，即您将鼠标“悬停” mousemove的event.target一直开始获取新目标
触摸事件目标具有不同的逻辑：
- event.target将返回“未定义”，因为在触摸屏幕的第一个触摸点的event.touches [0] .target中，带有触摸事件的事件目标信息被“掩埋”了。
- 另一件事是，在进行触摸移动事件时，您会在移动时不断“按下”屏幕，因此与鼠标移动（更像是“悬停”）不同，触摸时您会“始终在拖动”。因此，对于触摸事件-事件对象将始终跟踪触摸开始期间获取的第一个元素。
- 因此开发人员通常使用不同的浏览器api获取touchmove指针下方的目标：document.elementFromPoint（event.clientX，event.clientY）;

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

我建议您仔细阅读这篇文章b乔希：https://www.joshmorony.com/building-an-absolute-drag-directive-in-ionic-2/

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

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

离子3-手机上的“事件”缺少“目标”

1 个答案: