problems with mouse events

[emilgraichen]

Hello! I'm more or less new to JS. I want to be able to hover over a region and print the content of the region for now. I get it to work when clicking:

wsRegions.on('region-clicked', (region) => { console.log(region.content.innerHTML); });

This does however not seem to work. I have tried "region-mouseenter" and "region-mouseleave" as eventName, but it doesent seem to get it right.

//when mouse is over region wsRegions.on('over', (region) => { console.log(region.content.innerHTML); console.log("mouse entered the region"); });

//when mouse leaves region wsRegions.on('leave', () => { console.log("mouse left the region"); });

Help would be much appreciated!

[katspaugh]

wsRegions.on('region-clicked', (region) => { console.log(region.content.innerHTML); });

This looks correct and should work. That's how it's done in this example as well: https://wavesurfer-js.org/examples/#regions.js

Mouse over/leave events aren't propagated to the top-level Regions plugin events, but they are emitted as individual Region events. So you can do things like:

const region = wsRegions.addRegion({ ... })

region.on('over', () => { console.log(region.content.innerHTML) })

[emilgraichen]

Thank you! It worked when I targeted a specific region instance, as in your example!