如何在端点上添加事件侦听器答案

【问题标题】：How to add event listeners on endpoint如何在端点上添加事件侦听器
【发布时间】：2021-10-07 10:33:52
【问题描述】：

之前我们可以使用 -

将事件监听器添加到端点

this.instance = newInstance({
      container: this.wrapper.nativeElement,
});

_addEndpoints(
    id: string,
    sourceAnchors: Array<AnchorSpec>,
    targetAnchors: Array<AnchorSpec>
  ) {
    const endpointDOMEl = document.getElementById(`endpoint_${id}`);
    for (let i = 0; i < sourceAnchors.length; i++) {
      const sourceUUID = id + sourceAnchors[i];
      const endpoint = this.instance.addEndpoint(
        endpointDOMEl,
        this.sourceEndpoint,
        {
          anchor: sourceAnchors[i],
          uuid: sourceUUID,
        }
      );

      this.addListenersForEndpoint(endpoint, endpointDOMEl, null);
    }
}
addListenersForEndpoint() {
 endpoint.canvas.removeEventListener('mouseover', addHoverListener);
 endpoint.canvas.removeEventListener('mouseout', removeHoverListener);
 endpoint.canvas.addEventListener('mouseover', addHoverListener.bind(null, endpoint, domCircleEl, labelId));
 endpoint.canvas.addEventListener('mouseout', removeHoverListener.bind(null, endpoint, domCircleEl, labelId));
}

但是，在 5.x 中，我再也看不到 canvas 属性了。我可以使用什么替代方法来达到同样的效果？

【问题讨论】：

哪些端点？请加minimal reproducible example
@Vega BrowserJsPlumbInstance 的 addEndPointFunction 返回的端点。我已经添加了代码

标签： angular jsplumb

【解决方案1】：

您应该绑定到端点 mouseover 和 mouseout 事件：

https://docs.jsplumbtoolkit.com/community/lib/events

instance.bind(EVENT_ENDPOINT_MOUSEOVER, (e:Endpoint) => {

..

})

【讨论】：