在移动设备上的 jsplumb 图的节点和连接上未触发单击事件答案

【问题标题】：click event not triggered on nodes and connections of a jsplumb graph on mobile在移动设备上的 jsplumb 图的节点和连接上未触发单击事件
【发布时间】：2021-09-14 10:11:41
【问题描述】：

我有一个 Angular 应用程序，它带有一个从数据库中的数据动态构建的 jsPlumb 图，并且在创建的每个节点和连接上，用户可以单击以编辑属性并将它们保存到数据库。

我使用 Google Chrome 进行测试，在桌面模式下一切正常，但是当我使用 Chrome 开发工具切换到智能手机模式时，单击节点或连接时没有触发任何内容。

对于连接，我解决了这个问题。我使用的是虚线连接，这些连接仅在您单击破折号时触发单击或点击事件，而不是在您单击破折号之间时触发。在智能手机上可能很难点击确切的位置，所以我用没有破折号的“假”连接将每个连接加倍，现在我可以点击任何地方并且它可以工作。

但是我仍然有点击节点的问题，更具体地说是点击节点中的图标。

这是 HTML 代码：

                <div #learningPlanGraphNode
                    *ngFor="let learningPlanWithUserAccessRightsGraphNode of learningPlanWithUserAccessRightsGraphNodes"
                    [ngClass]="{
                            'window-not-clickable': true
                        }" id="{{'courseWindow' + learningPlanWithUserAccessRightsGraphNode.stepId}}"
                    [style.top]="learningPlanWithUserAccessRightsGraphNode.top + 'em'"
                    [style.left]="learningPlanWithUserAccessRightsGraphNode.left + 'em'"
                    [style.borderColor]="learningPlanWithUserAccessRightsGraphNode.color">
                    <!-- subscription not required -->
                    <mat-icon *ngIf="learningPlanWithUserAccessRightsGraphNode.subscriptionRequired === 0"
                        class="kps-node-top-left-icon-na"
                        (click)="editCourseUserSubscription(learningPlanWithUserAccessRightsGraphNode.stepId)">face
                    </mat-icon>
                    <!-- subscription required but no subscription -->
                    <mat-icon *ngIf="learningPlanWithUserAccessRightsGraphNode.subscriptionRequired !== 0 
                        && learningPlanWithUserAccessRightsGraphNode.subscriptionId === 0" class="kps-node-top-left-icon-ko"
                        (click)="editCourseUserSubscription(learningPlanWithUserAccessRightsGraphNode.stepId)">face
                    </mat-icon>

代码继续使用其他图标，每个图标都针对特定条件显示。

以下是这些图标的 CSS 代码：

[id^=courseWindow] mat-icon {
    cursor: pointer;
    z-index: 21;
}
[id^=courseWindow] mat-icon:hover {
    color: #FF9201 !important;
}
.kps-node-top-left-icon-na{
  color: #8E1E07 !important;
  position: absolute;
  left: 2px;
  top: 4px;
  font-size: 20px;
}

其他图标以此类推。

Click 事件在桌面模式下的 Chrome 上有效，在智能手机模式下使用开发工具的 Chrome 上也有效，但在原生 Android Chrome 上无效。

【问题讨论】：

你能分享一些代码来重现你的问题吗？
我已经更新了我的问题，因为我解决了连接问题，但没有解决节点中的图标问题。

标签： angular mobile jsplumb

【解决方案1】：

我使用 Chrome 开发工具来跟踪单击节点时触发了哪些事件。

事实上，您需要使用 pointerup 事件而不是 click 事件才能使其在桌面和移动设备上都工作。

【讨论】：