私は Web 開発の初心者で、TailwindCSS と AlpineJS を使用するプロジェクトに取り組み始めました。問題は、ページが読み込まれるたびに、イベント (@click、@mouseenter、および @mouseleave) がトリガーされることです。イベント (@click.prevent、@mouseenter.prevent、@mouseleave.prevent) に .prevent を追加しようとしましたが、うまくいきませんでした。大きすぎてすべてのコードを表示できないので、ここにその一部を示します。
@mouseenter と @mouseleave は次のとおりです。
<!-- Finances -->
<div
class="hidden md:flex sm:ml-6"
id="nav-heading"
aria-labelledby="nav-heading"
x-data="{ financesOpen: false }"
:aria-expanded="financesOpen"
>
<button
type="button"
class="inline-flex items-center px-3 py-2 text-base font-bold leading-3 text-gray-900 transition duration-150 ease-in-out border-b-2 hover:border-indigo-500 focus:no-underline lg:text-lg hover:no-underline hover:text-gray-900 focus:outline-none focus:border-indigo-700 focus:text-gray-900"
:aria-expanded="financesOpen"
aria-controls="nav-list"
@mouseenter="financesOpen = !financesOpen"
@mouseleave="financesOpen = !financesOpen"
@click.away="financesOpen = false"
>
Finanças
</button>
<div
x-show.transition.in.duration.100ms.origin.top.left.opacity.scale.10.out.duration.100ms.origin.bottom.right.opacity.scale.10="financesOpen"
id="nav-list"
class="absolute z-10 w-auto origin-top-left rounded-md shadow-lg top-16"
>
<!--
Finances dropdown panel, show/hide based on dropdown state.
-->
<div class="py-1 bg-white rounded-md shadow-xs" role="menu" aria-orientation="vertical" aria-labelledby="user-menu">
<a href="#" class="block px-4 py-2 text-sm leading-5 text-gray-700 hover:bg-gray-100 hover:text-gray-900 hover:no-underline focus:no-underline focus:outline-none focus:bg-gray-100 focus:text-gray-900" role="menuitem">
<div class="flex flex-row">
<img class="w-4 h-4 mr-1" src="https://img.icons8.com/ultraviolet/80/000000/rhombus.png"/>
<div class="flex flex-col">
<p class="font-medium">Exchange Earn</p>
<p class="text-xs text-gray-500">Ganhe criptomoedas enquanto dorme</p>
</div>
</div>
</a>
<a href="#" class="block px-4 py-2 text-sm leading-5 text-gray-700 hover:bg-gray-100 hover:text-gray-900 hover:no-underline focus:no-underline focus:outline-none focus:bg-gray-100 focus:text-gray-900" role="menuitem">
<div class="flex flex-row">
<img class="w-4 h-4 mr-1" src="https://img.icons8.com/ultraviolet/80/000000/rhombus.png"/>
<div class="flex flex-col">
<p class="font-medium">Exchange Pool</p>
<p class="text-xs text-gray-500">Minere mais recompensas conectando-se com o nosso grupo</p>
</div>
</div>
</a>
<a href="#" class="block px-4 py-2 text-sm leading-5 text-gray-700 hover:bg-gray-100 hover:text-gray-900 hover:no-underline focus:no-underline focus:outline-none focus:bg-gray-100 focus:text-gray-900" role="menuitem">
<div class="flex flex-row">
<img class="w-4 h-4 mr-1" src="https://img.icons8.com/ultraviolet/80/000000/rhombus.png"/>
<div class="flex flex-col">
<div class="flex flex-row items-center">
<p class="font-medium">Exchange Visa Card</p>
<svg class="h-4 ml-1" width="20px" height="16px" viewBox="0 0 20 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<title>fiber_new</title>
<desc>Created with Sketch.</desc>
<g id="Icons" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><g id="Rounded" transform="translate(-714.000000, -910.000000)"><g id="AV" transform="translate(100.000000, 852.000000)"><g id="-Round-/-AV-/-fiber_new" transform="translate(612.000000, 54.000000)"><g>
<rect id="Rectangle-Copy-17" x="0" y="0" width="24" height="24"></rect>
<path d="M20,4 L4,4 C2.89,4 2.01,4.89 2.01,6 L2,18 C2,19.11 2.89,20 4,20 L20,20 C21.11,20 22,19.11 22,18 L22,6 C22,4.89 21.11,4 20,4 Z M8.5,14.21 C8.5,14.64 8.14,15 7.71,15 C7.46,15 7.22,14.88 7.07,14.67 L4.75,11.5 L4.75,14.38 C4.75,14.73 4.47,15 4.13,15 C3.79,15 3.5,14.72 3.5,14.38 L3.5,9.79 C3.5,9.36 3.86,9 4.29,9 L4.34,9 C4.6,9 4.84,9.12 4.99,9.33 L7.25,12.5 L7.25,9.62 C7.25,9.28 7.53,9 7.88,9 C8.23,9 8.5,9.28 8.5,9.62 L8.5,14.21 Z M13.5,9.64 C13.5,9.99 13.22,10.26 12.88,10.26 L11,10.26 L11,11.38 L12.88,11.38 C13.23,11.38 13.5,11.66 13.5,12 L13.5,12.01 C13.5,12.36 13.22,12.63 12.88,12.63 L11,12.63 L11,13.74 L12.88,13.74 C13.23,13.74 13.5,14.02 13.5,14.36 C13.5,14.71 13.22,14.98 12.88,14.98 L10.35,14.98 C9.88,14.98 9.5,14.6 9.5,14.13 L9.5,9.83 C9.5,9.38 9.88,9 10.35,9 L12.88,9 C13.23,9 13.5,9.28 13.5,9.62 L13.5,9.64 Z M20.5,14 C20.5,14.55 20.05,15 19.5,15 L15.5,15 C14.95,15 14.5,14.55 14.5,14 L14.5,9.62 C14.5,9.28 14.78,9 15.12,9 C15.46,9 15.74,9.28 15.74,9.62 L15.74,13.51 L16.87,13.51 L16.87,10.61 C16.87,10.26 17.15,9.99 17.49,9.99 C17.83,9.99 18.11,10.27 18.11,10.61 L18.11,13.5 L19.23,13.5 L19.23,9.62 C19.23,9.27 19.51,9 19.85,9 C20.19,9 20.47,9.28 20.47,9.62 L20.47,14 L20.5,14 Z" id="Icon-Color" fill="#1D1D1D"></path>
</g></g></g></g></g>
</svg>
</div>
<p class="text-xs text-gray-500">Converta e faça pagamentos usando suas criptomoedas no mundo todo</p>
</div>
</div>
</a>
<a href="#" class="block px-4 py-2 text-sm leading-5 text-gray-700 hover:bg-gray-100 hover:text-gray-900 hover:no-underline focus:no-underline focus:outline-none focus:bg-gray-100 focus:text-gray-900" role="menuitem">
<div class="flex flex-row">
<img class="w-4 h-4 mr-1" src="https://img.icons8.com/ultraviolet/80/000000/rhombus.png"/>
<div class="flex flex-col">
<p class="font-medium">Empréstimos de criptomoedas</p>
<p class="text-xs text-gray-500">Obtenha um empréstimo instantâneo garantido por ativos de criptomoeda</p>
</div>
</div>
</a>
<a href="#" class="block px-4 py-2 text-sm leading-5 text-gray-700 hover:bg-gray-100 hover:text-gray-900 hover:no-underline focus:no-underline focus:outline-none focus:bg-gray-100 focus:text-gray-900" role="menuitem">
<div class="flex flex-row">
<img class="w-4 h-4 mr-1" src="https://img.icons8.com/ultraviolet/80/000000/rhombus.png"/>
<div class="flex flex-col">
<div class="flex flex-row items-center">
<p class="font-medium">Liquid Swap</p>
<svg class="h-4 ml-1" width="20px" height="16px" viewBox="0 0 20 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<title>fiber_new</title>
<desc>Created with Sketch.</desc>
<g id="Icons" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><g id="Rounded" transform="translate(-714.000000, -910.000000)"><g id="AV" transform="translate(100.000000, 852.000000)"><g id="-Round-/-AV-/-fiber_new" transform="translate(612.000000, 54.000000)"><g>
<rect id="Rectangle-Copy-17" x="0" y="0" width="24" height="24"></rect>
<path d="M20,4 L4,4 C2.89,4 2.01,4.89 2.01,6 L2,18 C2,19.11 2.89,20 4,20 L20,20 C21.11,20 22,19.11 22,18 L22,6 C22,4.89 21.11,4 20,4 Z M8.5,14.21 C8.5,14.64 8.14,15 7.71,15 C7.46,15 7.22,14.88 7.07,14.67 L4.75,11.5 L4.75,14.38 C4.75,14.73 4.47,15 4.13,15 C3.79,15 3.5,14.72 3.5,14.38 L3.5,9.79 C3.5,9.36 3.86,9 4.29,9 L4.34,9 C4.6,9 4.84,9.12 4.99,9.33 L7.25,12.5 L7.25,9.62 C7.25,9.28 7.53,9 7.88,9 C8.23,9 8.5,9.28 8.5,9.62 L8.5,14.21 Z M13.5,9.64 C13.5,9.99 13.22,10.26 12.88,10.26 L11,10.26 L11,11.38 L12.88,11.38 C13.23,11.38 13.5,11.66 13.5,12 L13.5,12.01 C13.5,12.36 13.22,12.63 12.88,12.63 L11,12.63 L11,13.74 L12.88,13.74 C13.23,13.74 13.5,14.02 13.5,14.36 C13.5,14.71 13.22,14.98 12.88,14.98 L10.35,14.98 C9.88,14.98 9.5,14.6 9.5,14.13 L9.5,9.83 C9.5,9.38 9.88,9 10.35,9 L12.88,9 C13.23,9 13.5,9.28 13.5,9.62 L13.5,9.64 Z M20.5,14 C20.5,14.55 20.05,15 19.5,15 L15.5,15 C14.95,15 14.5,14.55 14.5,14 L14.5,9.62 C14.5,9.28 14.78,9 15.12,9 C15.46,9 15.74,9.28 15.74,9.62 L15.74,13.51 L16.87,13.51 L16.87,10.61 C16.87,10.26 17.15,9.99 17.49,9.99 C17.83,9.99 18.11,10.27 18.11,10.61 L18.11,13.5 L19.23,13.5 L19.23,9.62 C19.23,9.27 19.51,9 19.85,9 C20.19,9 20.47,9.28 20.47,9.62 L20.47,14 L20.5,14 Z" id="Icon-Color" fill="#1D1D1D"></path>
</g></g></g></g></g>
</svg>
</div>
<p class="text-xs text-gray-500">Faça trading e ganhe comissões com pools de liquidez</p>
</div>
</div>
</a>
</div>
</div>
</div>
@click の場所:
<!-- Security -->
<div
id="nav-heading"
class="relative hidden mr-4 lg:block"
aria-labelledby="nav-heading"
x-data="{ securityOpen: false }"
:aria-expanded="securityOpen"
>
<button
class="flex-shrink-0 block group focus:outline-none"
:aria-expanded="securityOpen"
aria-controls="nav-list"
@click="securityOpen = !securityOpen"
@click.away="securityOpen = false"
>
<div class="flex items-center justify-center w-10 h-10 pb-2 rounded-full sm:bg-red-500 sm:pb-0 animate-pulse">
<img class="w-8 h-8" src="https://img.icons8.com/cotton/64/000000/shield.png"/>
</div>
</button>
<!--
Security dropdown panel, show/hide based on dropdown state.
-->
<div
x-show.transition.in.duration.100ms.origin.top.right.opacity.scale.10.out.duration.100ms.origin.bottom.left.opacity.scale.10="securityOpen"
id="nav-list"
class="absolute transform translate-x-20 sm:transform-none right-0 mt-1.5 text-white origin-top-right bg-indigo-900 border rounded-md shadow-lg w-80"
>
<div class="p-4 border-b" role="menu" aria-orientation="vertical" aria-labelledby="user-menu">
<h4>NÍVEL DE SEGURANÇA ATUAL</h4>
<h4 class="text-red-600">CRITICAMENTE BAIXO</h4>
<p>Sua conta tem um número criticamente baixo de recursos de segurança ativados. É altamente recomendável que você ative esses recursos para proteger sua conta.</p>
</div>
<div class="inline-flex items-center p-4" role="menu" aria-orientation="vertical" aria-labelledby="user-menu">
<img class="w-8 h-8 mr-1" src="https://img.icons8.com/cotton/64/000000/shield.png"/>
<a class="text-lg font-medium text-white cursor-pointer lg:text-xl hover:text-gray-300 focus:no-underline hover:no-underline">Proteja sua conta</a>
</div>
</div>
</div>