添加模态时AlpineJs触发click.outside事件答案

【问题标题】：AlpineJs triggering a click.outside event when adding modal添加模态时AlpineJs触发click.outside事件
【发布时间】：2022-06-11 17:18:31
【问题描述】：

我有一个在单击按钮时加载了 alpines 的模式，事情是它还触发了 click.outside 事件。有没有办法阻止这种情况发生？我已经尝试在网上找到解决方案但找不到任何东西，有人可以帮助新手吗？

                <div class="mt-12" x-data="{isTrailerModalVisible: false,}">

                    <button
                        x-on:click="isTrailerModalVisible = true";
                        class="flex bg-blue-500 text-white font-semibold px-4 py-4 hover:bg-blue-600 rounded transition ease-in-out duration-150 items-center"
                    >
                        <i class="far fa-play-circle"></i>
                        <div class="ml-2">Play Trailer</div>
                    </button>


                    <template x-if="isTrailerModalVisible">
                        <div

                            x-show="isTrailerModalVisible"
                            style="background-color: rgba(0, 0, 0, .5);"
                            class="z-50 fixed top-0 left-0 w-full h-full flex items-center shadow-lg overflow-y-auto"
                        >

                            <div class="container mx-auto lg:px-32 rounded-lg overflow-y-auto">
                                <div class="bg-gray-300 rounded"

                                >
                                    <div class="flex justify-end pr-4 pt-2">
                                        <button
                                            @click="isTrailerModalVisible = false"

                                            @keydown.escape.window="isTrailerModalVisible = false"
                                            class="text-3xl leading-none hover:text-gray-300"
                                        >
                                            &times;
                                        </button>
                                    </div>

                                    <!--Finish the clicked away for closing the modal-->
                                    <div class="modal-body px-8 py-8" @click.outside="console.log('clicked')";>
                                        <div class="responsive-container overflow-hidden relative" style="padding-top: 56.25%" >
                                            <iframe width="360" height="315" class="responsive-iframe absolute top-0 left-0 w-full h-full" src="{{ $game['trailer'] }}" style="border:0;" allow="autoplay; encrypted-media" allowfullscreen></iframe>
                                        </div>
                                    </div>

                                </div>
                            </div>
                         </div>
                    </template>
                </div>

【问题讨论】：

标签： javascript events alpinejs

【解决方案1】：

我在从 Alpine 2 更新到 3 时也遇到了这个问题。将 @click.outside 切换到 @mousedown.outside 为我解决了这个问题。

我不确定这是否是 Alpine 中的错误，因为 @click.away（调用 @click.outside 的旧方法）在 Alpine 2 中有效，但它确实适用于此解决方案。

【讨论】：