Skip to main content
5mo ago

How to add a click event to a Rive button for my JavaScript?

I have a rive button presented in the RIVE JS/WASM advanced canvas runtime. The Rive app has a pointerDown Listener. How do I capture the pointerDown event in my JavaScript?

5 replies
5mo ago

Note... we are sending mouse input into the stateMachine using pointerUp() but that sends data for clicking anywhere on the artboard. We want to know if the stateMachine triggers a pointerUp on the button on the artboard.

5mo ago

We did it by testing the input of the stateMachine - which happened to have a toggle value. But would still like to know how to tell if a Listener has fired.

https://zimjs.com/rive/listener.html


5mo ago

Do you have an event ready in the file like this?

5mo ago

You can receive all these event in the javascript. Could this solution work for you?

(edited) 5mo ago

Thanks for the response, . The Rive preview is here: https://editor.rive.app/preview/12375-23478-switcher/10421955 and I do not think I see a report event anywhere. I did not make the original and the remix is not active for me. I see how to subscribe to the events here https://rive.app/community/doc/rive-events/docbOnaeffgr

So to confirm, if there is a listener, there is not necessarily an event - the listener can just handle interaction on its own. But if we assign the event reporter to the listener then we can capture that with the Rive Events in our own JavaScript event function.

Question: if an event is assigned to the listener, can the listener also do what it was going to do - like toggle a button or make some eyes follow the mouse? Or once you add an event to the listener, are you expected to trigger inputs manually in your JavaScript event listener? I guess I can try... I have not actually made a Rive app yet... just using other people's. But advice would help too. Cheers.