mouseup event alpine js

Question

Is there any mouseup event in alpinejs? @click.away is not suitable, because you actually need to click somewhere else. And in my case one event should be triggered when button is pressed and another when mousekey is released no matter where courser is.

Update: Right now I have this code:

        <div x-data="{ buttonPresed: false }">
            <button 
            @click=" buttonPresed = true " 
            class="h-10 w-40 border rounded-lg bg-white text-black font-bold">Some Button</button>
            <div x-show=" buttonPresed === true " class="text-lg text-white font-bold">Button pressed</div>
        </div>

Text "Button pressed" is shown after the button is pressed. I need it to be hided (buttonPresed=false) when mouse button is released. So text is only shown when user's finger on the mouse button. How can I do this?

Answer 1

You can use any DOM events with Alpine.js's x-on:[event-name] or @[event-name] in this case x-on:mouseup="console.log($event)" or @mouseup="console.log($event)" will log the mouseup event when it's triggered.

Answer 2

Even though @Hugo partly answered my question I decided to write a complete answer.

        <div x-data="{ buttonPresed: false }">
            <button
            x-on:mouseup="buttonPresed=false" 
            x-on:mousedown="buttonPresed = true"
            {{-- don't use!!!!!: @click=" buttonPresed = true "  --}}
            class="h-10 w-40 border rounded-lg bg-white text-black font-bold">Some Button</button>
            <div x-show=" buttonPresed === true " class="text-lg text-white font-bold">Button pressed</div>
        </div>

The commented part is very important, because the functionality works how it should work only if both events triggered with "x-on".