英文:
Child triggers the onClick event of its parent
问题
我有一个父元素div，我在其上设置了一个onClick事件处理程序，但它被其子元素触发。我只想在单击父元素时筛选出父元素的一个子元素。我将使用状态创建一个多选列表，这就是我需要的原因。
这是我的代码：
import { useState, useEffect } from "react";import events from "../utils/events.js";import "../styles/events.scss";const Events = () => {const [selectedEvent, setSelectedEvent] = useState(events[0].id);return (<div className="events-container"><div className="events"><div className="events-cards">{events.map((event) => (<divkey={event.id}className="event"onClick={(e) => {const date = e.target.querySelector(".date");date.classList.add("selected-event");}}><p className="date">{event.date}</p><h1 className="name">{event.name}</h1><p className="description">{event.description}</p></div>))}</div></div></div>);};export default Events;
希望这有助于你的问题。
英文:
I have a parent, div, on which I've set an onClick event handler, but it is trigerred by its childrens. All I want to do is to filter one child of the parent element when the parent is clicked. I will do a list o multiple choices, using states, so that's why I need it.
Here's my code:
import { useState, useEffect } from "react";import events from "../utils/events.js";import "../styles/events.scss";const Events = () => {const [selectedEvent, setSelectedEvent] = useState(events[0].id);return (<div className="events-container"><div className="events"><div className="events-cards">{events.map((event) => (<divkey={event.id}className="event"onClick={(e) => {const date = e.target.querySelector(".date");date.classList.add("selected-event");}}><p className="date">{event.date}</p><h1 className="name">{event.name}</h1><p className="description">{event.description}</p></div>))}</div></div></div>);};export default Events;
答案1
得分: 1
你可以在事件对象上使用stopPropagation()方法。这将阻止事件冒泡到DOM树的上层，并阻止它达到父元素。
onClick={(e) => {// 阻止点击事件传播到父dive.stopPropagation();const date = e.currentTarget.querySelector(".date");date.classList.add("selected-event");}}
英文:
you can use the stopPropagation() method on the event object. This will stop the event from bubbling up the DOM tree and prevent it from reaching the parent element.
onClick={(e) => {// Stop the click event from reaching the parent dive.stopPropagation();const date = e.currentTarget.querySelector(".date");date.classList.add("selected-event");}}
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论