OK, for those looking to work with mouse down events, here’s the things I had to learn/do:
- Create the HTML element in the call to
renderwith anidandphx-hookattributes, - Modify my
app.jsto work with the hook and specifically handle the element’s mouse down event - Add a new event handler in my LiveView component to receive the event.
Let’s look at each in turn…
1. Creating the HTML element
Somewhere in your render you need to have a HTML element you’d like to listen to events on. I’m using a button here. Your element needs to have a unique ID (this can be anything but is typically hyphen-separated such as "lovely-button") and also a phx-hook attribute which can also be anything but is typically CamelCase such as YoButton:
<button id="lovely-button" phx-hook="YoButton">yo button!</button>
2. Handling the JS event
Now we have our HTML element, we need to add the appropriate javascript event handler. This will be called when the button is clicked and will then tell the server via the pushEvent function.
First we need to edit our app.js to include a Hooks object which includes an internal YoButton object (this needs to be named similarly to the phx-hook attribute above).
LiveView gives us a mounted callback to use which is called when all the server and client initialisation is completed, so we know things are ready to go.
Inside this callback, we can add our event handler which listens for 'mousedown' events and then uses pushEvent to tell the server:
let Hooks = {}
Hooks.YoButton = {
mounted(){
this.el.addEventListener('mousedown', e => {
this.pushEvent("mouseymouse");
});
}
}
We also need to teach our liveSocket about the Hooks:
let liveSocket = new LiveSocket("/live", Socket, {
hooks: Hooks,
params: {_csrf_token: csrfToken},
....
3. Receiving the event on the server
This is probably the easiest bit. In our LiveView component we just need a new handler function:
def handle_event("mouseymouse", _params, socket) do
# do something interesting!
{:noreply, socket}
end
I hope that this helps someone trying to do something similar 
