Previous
Next

Handling Events in Custom Styles

In custom styles, you can register native DOM event listeners directly on DOM elements. This is useful for implementing interactive elements like clickable buttons within the visual.

Note
 To handle click events on entire graph items, we recommend using the item click events offered by the input modes. If you need to handle clicks on a specific area of your item visualization, you can also use the IClickListener interface.

Since yFiles uses native pointer capture for processing input events, you have to stop the event propagation for the pointerdown event to prevent this. Otherwise, e.g. click listeners on your DOM elements will not be triggered:

// register a native click listener on the SVG element
button.addEventListener('click', () => {
  alert(`Button has been clicked on node`)
})

// Stop the pointerdown event propagation, so yFiles does not start pointer capture.
// Otherwise, the click listener above would not be triggered.
button.addEventListener('pointerdown', (e) => e.stopPropagation())

For more specific source code examples, please see one of the source code demos that make use of native listeners in custom styles – for example:

Previous
Next