LWC中点击按钮时event、event.target及event.target.value未定义问题求助

数据老陈

2026-6-23

LWC按钮点击事件event为undefined的解决方案

问题分析

点击按钮触发handleBookNow时，event、event.target等均为undefined，通常是事件传递异常或依赖event.target的不可靠性导致，推荐采用LWC数据驱动的方式规避这类问题。

修复方法1：使用数据属性（dataset）安全获取ID

修改模板中的按钮，添加data-anime-id属性存储ID：

<template for:each={animeData} for:item="anime">
    <div key={anime._id} class="Anime-Item">
        <!-- 其他内容保持不变 -->
        <button class="Book-Anime" data-anime-id={anime._id} onclick={handleBookNow}>Book Now!</button>
    </div>
</template>

更新JS代码，通过currentTarget.dataset获取ID（currentTarget始终指向绑定事件的元素，比target更可靠）：

handleBookNow(event) {
    const animeId = event.currentTarget.dataset.animeId;
    console.log('Book Now button clicked for Anime ID:', animeId);
    this.bookNow(animeId);
}

bookNow(animeId) {
    console.log('Book Now action initiated for Anime ID:', animeId);
    this.isBook = true;
    this.isError = false;
}

修复方法2：直接传递数据到事件处理函数（LWC推荐）

无需依赖事件对象，直接在模板中传递anime对象或ID：

<template for:each={animeData} for:item="anime">
    <div key={anime._id} class="Anime-Item">
        <!-- 其他内容保持不变 -->
        <button class="Book-Anime" onclick={() => this.handleBookNow(anime)}>Book Now!</button>
    </div>
</template>

简化JS代码，直接接收传递的参数：

handleBookNow(anime) {
    const animeId = anime._id;
    console.log('Book Now button clicked for Anime ID:', animeId);
    this.bookNow(animeId);
}

bookNow(animeId) {
    console.log('Book Now action initiated for Anime ID:', animeId);
    this.isBook = true;
    this.isError = false;
}