如何在端点上添加事件监听器

Question

之前我们可以使用 -

将事件侦听器添加到端点

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 属性。我可以使用什么替代方法来实现同样的目标？

Answer 1

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

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

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

..

})

如何在端点上添加事件监听器

How to add event listeners on endpoint

jsplumb

angular