Angular项目中jsPlumb图节点图标click事件在安卓原生Chrome不触发

数据老陈

2026-10-4

修复方案

1. 关闭jsPlumb默认移动端事件拦截

jsPlumb托管的节点容器默认会绑定touchstart、touchend等触摸事件，会阻止内部元素原生点击事件冒泡，在jsPlumb初始化逻辑中添加对应配置即可：

// 全局禁用jsPlumb默认移动端触摸事件拦截
jsPlumb.Defaults.TouchEnabled = false;

// 若需保留节点拖拽功能，仅放开内部元素事件权限
jsPlumb.draggable(nodeElement, {
  touchOptions: {
    passive: false
  }
});

2. 适配移动端触摸事件

安卓原生Chrome中click事件容易被系统默认触摸行为拦截，替换为适配移动端的触摸事件即可：

首先在app.module.ts导入Angular官方手势支持模块：

import { HammerModule } from '@angular/platform-browser';

@NgModule({
  imports: [
    // 其余原有引入项
    HammerModule
  ]
})

把HTML中图标绑定的(click)事件替换为(tap)事件：

<mat-icon 
  class="kps-node-top-left-icon-na"
  (tap)="editCourseUserSubscription(learningPlanWithUserAccessRightsGraphNode.stepId)">
  face
</mat-icon>

3. 扩大图标点击热区

移动端规范最小可点击区域不小于48*48px，你当前设置的图标尺寸仅20px，很容易出现点击判定失败的情况，修改对应CSS即可：

[id^=courseWindow] mat-icon {
    cursor: pointer;
    z-index: 21;
    /* 新增以下配置 */
    padding: 14px;
    margin: -14px; /* 抵消内边距带来的位置偏移
    touch-action: manipulation; /* 禁用浏览器默认触摸缩放、长按选中行为，避免拦截点击事件
    pointer-events: all !important;
}