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

Question

I use onMouseEnter on a parent div. when I mouse hover on a child element the parent mouseHover is fired fired and I want to stop it. I used e.stopPropagation() but also the parent mouseHover fired. When I mouseOver on the child element, The parent mousehover is fired. I prevent this parent's mouseHover Event. onMouseEnter={(e)=> e.stopPropagation()} I am using this on the child element to stop the parent mouseHover. But still parent mouseHover is fired.

How can I stop Event Bubbleing for onMouseEnter ???

Or, is it possible to stop Event Bubbleing for mouseHove like onMouseEnter?

 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

In the meantime just to confirm, as you are not adding any behaviour on the child element on mouseEnter, just add the below styles to all elements where pointer events are not needed.

pointer: none;

Ofcourse other solution is to check the target of the event and if it's not the one intended, just skip the rest part of the logic.