React 解决鼠标移入子元素触发父元素的mouseout事件

最新推荐文章于 2023-09-26 16:29:13 发布
转载 最新推荐文章于 2023-09-26 16:29:13 发布 · 4.6k 阅读 · 0 ·
CC 4.0 BY-SA版权
原文链接：https://blog.csdn.net/qq_41139830/article/details/82860616
文章标签：

#react.js #javascript #前端

本文探讨了使用mouseenter和mouseleave事件替代mouseover和mouseout事件的方法，以实现更精确的鼠标悬停效果。通过这两种方法可以避免因子元素触发事件而导致的误操作，并介绍了如何在React中正确应用这些事件。

方法一、 用mouseleave/mouseenter代替mouseover/mouseout【最佳方法】
mouseover 与 mouseenter:

mouseover => 不论鼠标指针穿过被选元素或其子元素，都会触发 mouseover 事件。
mouseenter => 只有在鼠标指针从元素外穿入被选元素（到元素内）时，才会触发 mouseenter 事件。

mouseout 与 mouseleave:

mouseout => 不论鼠标指针离开被选元素还是任何子元素，都会触发 mouseout 事件。
mouseleave => 只有在鼠标指针从元素内穿出被选元素（到元素外）时，才会触发 mouseleave 事件。

方法二、利用e.stopPropagation()阻止事件进一步传播
e.stopPropagation()会终止事件在传播过程的捕获、目标处理或起泡阶段进一步传播。调用该方法后，该节点上处理该事件的处理程序将被调用，事件不再被分派到其他节点。

方法一亲测有用，方法二：react中么有用
转载

补充

react中使用 onMouseLeave()；
MouseLeave(),鼠标移出div也不会消失

JavaScript进阶篇：三、 事件处理与 DOM 操作基础
博客
03-20 1034
通过本篇教程，深入学习了 JavaScript 中的事件处理与 DOM 操作基础，包括如何选择、创建、插入、修改和删除 DOM 元素，以及如何处理各种类型的事件。这些技能是前端开发的核心，能够帮助开发者创建交互丰富的 web 页面。在后续的学习中，将进一步探索更高级的 DOM 操作技巧、事件委托、动画效果实现等内容，逐步提升前端开发能力，为构建复杂的 web 应用奠定坚实的基础。
【解读 ahooks 源码系列】DOM篇（二）
xxxzzzqqq_的博客
03-16 455
【解读 ahooks 源码系列】DOM篇（一）本文主要解读useTitleuseFaviconuseHover源码实现。
react 多个view鼠标移入移出文字变化更换图标，点击打开对应的内容弹窗
qq_36257356的博客
06-16 1416
多个view鼠标移入移出文字变化更换图标，点击打开对应的内容弹窗
如何在React中监听鼠标事件
TianXuab的博客
09-26 3479
在React中监听鼠标事件很简单。您只需要将事件处理程序添加到组件中，并使用相应的事件属性。除了单击事件之外，React还支持其他类型的鼠标事件。如果您需要获取鼠标指针的位置，您可以使用。在React中监听鼠标事件很简单。您只需要将事件处理程序添加到组件中。要监听这些事件，您可以像监听单击事件一样添加事件处理程序。除了单击事件之外，React还支持其他类型的鼠标事件。属性来获取鼠标位置。的函数，它将在单击按钮时执行。这告诉React在单击按钮时调用该函数。有时，您可能需要获取鼠标指针的位置。
React系统学习笔记--超基础--超详细--超简洁--React应用基于脚手架（三）
m0_55644132的博客
11-06 574
脚手架是用webpack搭建的，我们现在不用从零开始搭建了xxx脚手架：用来帮助程序原快速创建一个基于xxx库的模板项目react提供了一个用于创建react项目的脚手架库：create-react-app（基于React脚手架的项目，把项目的每个文件读懂，再把自己的业务逻辑加进去）项目的整体技术架构为：react+webpack+es6+eslint使用脚手架开发的项目的特点：模块化、组件化、工程化有了这个库，才能创建出来脚手架。
todoList案例（react版本）之鼠标移入效果
richest_qi的博客
05-09 1828
文章目录css实现Item/index.jsx（Item组件）Item/index.css（Item组件）js实现Item/index.jsx（Item组件）相关链接 鼠标移入事项时，事项所在行背景色变为浅灰色，且显示删除按钮。 鼠标移出事项时，事项所在行背景色变为白色，且不显示删除按钮。 对此，有两种实现方式， css实现 js实现 css实现 代码变更涉及的文件有， Item/index.jsx Item/index.css Item/index.jsx（Item组件） 变动部分：<bu
react鼠标移入移出样式修改
酸酸的博客
11-09 6261
解决react鼠标移入移出样式修改的问题。 效果截图： 代码实现： js代码： <div className={styles.listStyle}> <Menu onClick={this.listClick} style={{ width: '100%', height: '100%' }}
大屏鼠标移入 事件不生效
最新发布
08-23
在大屏应用中，鼠标移入事件不生效是一个较为常见的问题，尤其在需要响应式设计或高分辨率设备适配的场景中更为突出。这种问题通常与元素布局、事件绑定方式、浏览器渲染机制以及硬件设备特性有关。 ### 事件不生效...
掌握鼠标悬停效果的JS与CSS实现技巧
只有当鼠标指针移入元素的边界内时，才会触发`mouseenter`事件，它不会对子元素再次触发。 ```javascript element.addEventListener('mouseenter', function(event) { // 处理鼠标悬停事件 }); ``` ### 知识...
jQuery实现鼠标经过图片遮罩层与跟随效果
当鼠标移入时，jQuery通过选择器选中对应的遮罩元素，并使用`.show()`、`.fadeIn()`或直接修改CSS属性的方式将其呈现出来。这种结构化的DOM组织方式确保了多个图片项之间互不干扰，各自独立响应用户交互。 第三是**...
react 鼠标移入放大_ReactJS鼠标移动|触摸移动事件处理
weixin_39926739的博客
12-23 320
JavaScript语言：JaveScriptBabelCoffeeScript确定class Drawing extends React.Component {constructor(props) {super(props);this.state = {points: []};}move(evt) {if (evt.target.tagName.toLowerCase() === 'svg') ...
如何防止鼠标移出移入子元素触发mouseout和mouseover事件
热门推荐
阵雨的博客
08-11 1万+
我想实现的目标：当鼠标进入黑色框时，橙色框执行淡入动画；当黑色框范围移动的时候（即使经过粉色框，动画仍然不被触发）；当鼠标移出的时候，橙色方块消失。 遇到的问题阐述：当鼠标移入黑色框的时候，橙色框执行淡入动画，但是当鼠标从黑色框经过粉色框的时候，橙色框就消失了，然后又执行一遍淡入动画。当鼠标从粉色框移出到黑色框的时候，橙色框的淡入动画又被执行。这不是我想要的。 初期代码： <!DOC...
react子组件触发父组件事件
weixin_44086727的博客
04-28 2824
父组件: // 标题点击事件 从子组件传递过来 handleTabsItemChange(index) { // 1 获取被点击的标题索引 const index = index; // 2 修改源数组 let {tabs} = this.state; tabs.map((v, i) => i === index ? v.isActive = ...
鼠标在子元素内移动时，任然触发了父元素mouseleave事件，个人偶遇情况
qq_33982898的博客
12-28 1881
场景： 为某元素绑定 mouseenter 和 mouseleave事件，鼠标进入时 显示某个子元素，离开时隐藏该子元素。但是鼠标在该子元素中移动时，仍然触发了父元素的mouseleave事件。子元素使用的是position定位布局， 解决： 层级问题，子元素层级不够，鼠标在子元素内移动时，触碰到了其他层次的元素。所以触发了父元素的mouseleave事件。 设置子元素 z-index 就 OK了 此为个人偶遇的情况，仅供参考。 如果是其他问题导致的该现象，可以试试 pointer-eve..
react小案例分享——鼠标划过显示内容
weixin_39917260的博客
11-02 2922
我们写react代码，做列表List展示操作时，遇到鼠标移入元素，弹出浮层, 鼠标划过显示内容,
前端学习（3167）：react-hello-react之鼠标移入效果
歌谣的博客
07-11 431
第二十二章 案例TodoList之鼠标事件
天界程序员的博客
04-19 1586
使用鼠标事件控制列表的背景颜色和按钮的显示与隐藏
react hooks 实现商品详情页 鼠标移入图片中,右边放大显示
没落的博客
02-18 1050
react hooks 实现鼠标移入图片,右边放大显示的效果
react-阻止其他事件触发
进一步，有一步的欢喜。
06-10 1649
//方法 onOpenDrawer=(e)=>{ e.stopPropagation(); this.setState({ drawerVisible: true }); } //调用 <a onClick={this.onOpenDrawer}>了解更多</a> 控制台打印得到的e中有这个: stopPropagation: function destructor()。 直接调用就可以。 原理来自于DOM： jQ.
react如何解决点击子元素后父元素的css样式也生效
05-31
在 React 中，也可以使用事件委托来解决点击子元素后父元素的 CSS 样式也生效的问题。不同于使用原生 JavaScript，React 中需要使用 `event.currentTarget` 属性来获取当前绑定事件的元素。 例如，如果你想让点击子元素时不触发父元素的事件，可以通过以下代码实现： ```jsx class Parent extends React.Component { handleClick = (event) => { if (event.target.classList.contains('child')) { // 执行子元素的操作 } event.stopPropagation(); // 阻止事件冒泡到父元素 } render() { return ( <div className="parent" onClick={this.handleClick}> <div className="child">子元素</div> <div className="child">子元素</div> <div className="child">子元素</div> </div> ); } } ``` 在 `handleClick` 方法中，我们使用 `event.target` 来获取触发事件的元素，使用 `event.currentTarget` 来获取当前绑定事件的元素。当触发事件的元素是子元素时，执行子元素的操作，同时使用 `event.stopPropagation()` 方法阻止事件冒泡到父元素。 这样，当你点击子元素时，只会触发子元素的操作，不会触发父元素的事件。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值