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

Question

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

我用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;
}

其它图标依此类推。

点击事件在Chrome桌面模式下工作，也在Chrome智能手机模式下使用开发工具，但它不工作在原生Android Chrome。

Answer 1

我使用Chrome开发工具来跟踪点击节点时触发的事件。

事实是，你需要使用指向事件而不是点击事件，使它在桌面和移动设备上都能工作。