Capture 'click' event on a track-data

[miguelocana]

Hi, is it possible to capture the 'click' event on a track-data element? For instance, to redirect to a URL.

[sehilyi]

Hi @miguelocana!

You can subscribe to the "click" event through JS API (doc).

You can find a similar example in our Gosling React Example repository, where it uses the "rangeSelect" event instead:

https://github.com/gosling-lang/gosling-react-example/blob/e11178bc255af6bb4653f9923052e326bf55b720/src/example/MouseEvents.jsx#L19-L37

Be sure to turn on the click event in your track specification, i.e.,

experimental: {
    mouseEvents: true
},

Example: https://github.com/gosling-lang/gosling-react-example/blob/e11178bc255af6bb4653f9923052e326bf55b720/src/example/MouseEvents.jsx#L83C14-L89C17

[miguelocana]

Thank you for replying so quickly, and sorry for the delay. I'm using Vue3, and the implementation is being a bit more tedious. By following the documentation and the examples you provided, I managed to find a workaround:

onUpdated(async () => {
  let data = {
    ...,
    views: [
      {
        ...,
        tracks: [
          {
            ...,
            experimental: {
              mouseEvents: true
            }
          }
        ]
      }
    ]
  }
  let api = await embed(document.getElementById("gosling-container"), data)

  api.subscribe("click", (event, item) => {
    console.log(event, item)
  })

})