Alpine.js中handleClick被调用两次，点击关闭按钮也触发的原因？

这是事件冒泡机制导致的：关闭按钮是绑定了handleClick的父div的子元素，当点击子元素时，点击事件会沿着DOM树向上传播，触发父元素上绑定的点击事件处理器，所以handleClick会被调用。

解决方法有两种：

方法一：阻止关闭按钮的事件冒泡 #

在关闭按钮的点击事件中添加$event.stopPropagation()，阻止事件向上冒泡到父元素：

<button @@click="modelOpen = false; $event.stopPropagation()" type="button"
    class="absolute right-4 top-4 text-gray-400 hover:text-gray-500 sm:right-6 sm:top-8 md:right-6 md:top-6 lg:right-8 lg:top-8">
  <span class="sr-only">Close</span>
  <svg class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true">
    <path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12"></path>
  </svg>
</button>

方法二：在父元素的点击函数中判断触发源 #

修改handleClick函数，只有当点击事件的目标是父div本身时，才执行逻辑：

function handleClick(event, productId) {
  if (event.target === event.currentTarget) {
    console.log("vfg");
  }
}

内容的提问来源于stack exchange，提问作者maztt