mouseup 事件高山 js答案

【问题标题】：mouseup event alpine jsmouseup 事件高山 js
【发布时间】：2020-12-17 11:38:55
【问题描述】：

alpinejs 中有 mouseup 事件吗？ @click.away 不适合，因为您实际上需要单击其他地方。在我的情况下，当按下按钮时应该触发一个事件，当释放鼠标键时应该触发另一个事件，无论课程在哪里。

更新：现在我有这个代码：

        <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>

按下按钮后会显示文本“按下按钮”。释放鼠标按钮时，我需要隐藏它（buttonPresed=false）。因此，仅当用户的手指放在鼠标按钮上时才会显示文本。我该怎么做？

【问题讨论】：

标签： onclick mouseup alpine.js

【解决方案1】：

您可以将任何 DOM 事件与 Alpine.js 的 x-on:[event-name] 或 @[event-name] 一起使用，在这种情况下，x-on:mouseup="console.log($event)" 或 @mouseup="console.log($event)" 将在触发 mouseup 事件时记录它。

【讨论】：

你能看看问题更新吗？因为我有点不明白如何使用你提到的功能。提前致谢。
是的，你所做的很好，如果你有最初问题中的代码，我会想出类似的东西。
非常感谢。你的回答给了我这个想法））干杯，祝你好运！

【解决方案2】：

尽管@Hugo 部分回答了我的问题，但我还是决定写一个完整的答案。

        <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>

注释部分非常重要，因为只有当两个事件都由“x-on”触发时，该功能才能正常工作。

【讨论】：