可以像 React.js 中的 onMouseEnter 一樣使用我 stopPropagation 的 mouseHover 嗎？

Question

我在父 div 上使用 onMouseEnter。 當我將鼠標懸停在子元素上時，父 mouseHover 被觸發，我想停止它。 我使用了 e.stopPropagation() 但也觸發了父 mouseHover。 當我鼠標懸停在子元素上時，父鼠標懸停被觸發。 我阻止了這個父母的 mouseHover 事件。 onMouseEnter={(e)=> e.stopPropagation()}我在子元素上使用它來停止父鼠標懸停。 但仍會觸發父 mouseHover。

如何停止 onMouseEnter 的事件冒泡？？？

或者，是否可以像 onMouseEnter 一樣停止 mouseHove 的事件冒泡？

 import React, { useEffect, useState } from 'react'; import './Slider.css' import { Swiper, SwiperSlide} from 'swiper/react'; import SwiperCore, {Navigation, Pagination} from 'swiper'; const Slider = ({works}) => { const [isShown, setIsShown] = useState(false) const [cssProperty, setCssProperty] = useState({}); const mouseHover = (e) => { const {width, left, top, bottom} = e.target.parentNode.getBoundingClientRect() setCssProperty({width, left, top, bottom, opacity:1}) console.log(left) } const mouseLeave = (e) => { setIsShown(false) setCssProperty({opacity:0, mouseLeaveClass:"mouseLeaveClass"}) } return ( <div> <Swiper> { works.map((work,index) => ( <SwiperSlide key={`slide-${index}`} tag="li" style={{listStyle:"none"}} className="" > <div onMouseEnter={(e)=> mouseHover(e)} onMouseLeave={() => mouseLeave()} className="job-item" > <div className="job-info" style={{marginBottom:"5px", margin: "0 10px"}}> <div className="job-dates" > <span className="single-job-date"> <span className="job-date-items"> {work?.month && <span className="month" style={{color: "#fff", fontSize:"1rem", opacity:".7"}} onMouseEnter={e=>e.stopPropagation()} > {work?.month} </span>} {work?.startDate && <span className="date" style={{color: "#fff", fontSize:"32px"}} > {work?.startDate} </span>} <br/> </span> </span> <span className="end-single-job-date" > <span className="job-date-items" style={{marginRight:"15px"}}> {work?.endMonth && <span className="month" style={{color: "#fff", fontSize:"1rem", opacity: ".7"}} onMouseEnter={(e)=> e.stopPropagation()}> {work?.endMonth} </span>} {work?.endDate && <span className="date" style={{color: "#fff", fontSize:"32px", }} onMouseEnter={(e)=> e.stopPropagation()}> {work?.endDate} </span>} <br/> </span> </span> </div> <div class="job__title" style={{height: "110px", fontSize:"23px",color: "white !important", fontWeight:"500", transition:"all .5s", position:"relative"}}> {work.company} <br/> <span style={{fontSize:"16px",}}> {work.position} </span> </div> </div> </div> </SwiperSlide> ) ) } </Swiper> </div> ); }; export default Slider;

Answer 1

同時確認一下，由於您沒有在 mouseEnter 上的子元素上添加任何行為，只需將以下樣式添加到不需要指針事件的所有元素。

pointer: none;

當然，其他解決方案是檢查事件的目標，如果它不是預期的目標，則跳過邏輯的其余部分。