jq:mouseover和mouseout多次触发解决办法

区别:

mouseover与mouseenter

  不论鼠标指针穿过被选元素或其子元素,都会触发 mouseover 事件。

  只有在鼠标指针穿过被选元素时,才会触发 mouseenter 事件。

mouseout与mouseleave

  不论鼠标指针离开被选元素还是任何子元素,都会触发 mouseout 事件。

  只有在鼠标指针离开被选元素时,才会触发 mouseleave 事件。

在#a没有子元素的情况下,两者在效果上没有区别

但是#a有子元素的情况下,为了mouseovermouseout触发的此时就可能比mouseenter,mouseleave多

$("#a").mouseover(function(){ $(this).children().slideDown(1000); }).mouseout(function(){ $(this).children().slideUpt(1000); });

$("#a").mouseenter(function(){ $(this).children().slideDown(1000); }).mouseleave(function(){ $(this).children().slideUp(1000); });

而slideUp是个过程需要时间,但是mouseout,mouseover,mouseenter,mouseleave事件都是瞬间发生,多次触发会产生动画重复,这个可以用jq的stop方法阻止动画。

$("#a").mouseenter(function(){ $(this).children().stop().slideDown(1000); }).mouseleave(function(){ $(this).children().stop().slideUp(1000); });

jquery stop:

//语法结构

$("#div").stop();//停止当前动画,继续下一个动画
$("#div").stop(true);//清除元素的所有动画
$("#div").stop(false, true);//让当前动画直接到达末状态 ,继续下一个动画
$("#div").stop(true, true);//清除元素的所有动画,让当前动画直接到达末状态

时间: 2024-11-06 21:30:58

jq:mouseover和mouseout多次触发解决办法的相关文章

js当中mouseover和mouseout多次触发解决办法

问题描述 我希望当鼠标移动到id1上的时候,id2显示,当鼠标离开id1的时候,id2显示.问题如下: 1.当鼠标从id1上移动到id2上的时候,id由有显示变为不显示,然后变为显示 2.当鼠标从id2上移动到id1上的时候, id2有显示变为不显示,然后变为显示 我希望的是当鼠标在id1或者id2上移动的时候,id2一直显示,不发生变化. <script type="text/javascript" src="https://code.jquery.com/jquer

JavaScript中mouseover和mouseout多次触发解决办法

问题描述 我希望当鼠标移动到id1上的时候,id2显示,当鼠标离开id1的时候,id2显示.问题如下: 1.当鼠标从id1上移动到id2上的时候,id由有显示变为不显示,然后变为显示 2.当鼠标从id2上移动到id1上的时候, id2有显示变为不显示,然后变为显示 我希望的是当鼠标在id1或者id2上移动的时候,id2一直显示,不发生变化. <script type="text/javascript" src="https://code.jquery.com/jquer

mouseover和mouseout多次触发解决方法(兼容ie和firefox)(转)

在用到mouseover和mouseout事件来作为事件触发的条件,但是如果我们用做触发的元素内部有其他的元素的时候当鼠标移上的时候会反复的触发mouseover和mouseout事件,如导致菜单闪烁等问题.因为内部元素在鼠标移上的时候会向它的父对象派发事件,所以外面元素相当于也触发了mouseover 事件. 为了阻止mouseover和mouseout的反复触发,这里要用到event对象的一个属性relatedTarget,这个属性就是用来判断 mouseover和mouseout事件目标节

Vue事件总线(eventBus)$on()会多次触发解决办法

项目中使用了事件总线eventBus来进行两个组件间的通信, 使用方法是是建立eventBus.js文件,暴露一个空的Vue实例,如下: import Vue from 'vue'export default new Vue();在需要通信的两个组件中分别import import bus from "common/utils/eventBus";然后就可以通过emit.on进行通信:如下: 一个组件中发射bus.$emit('SUBMITSEARCH_PEOPLE',this.sea

mouseover和mouseout事件在鼠标经过子元素时也会触发

JavaScript的mouseover和mouseout事件,在绑定元素内部有子元素的情况下, 经过绑定元素时会多次触发mouseover和mouseout事件. jQuery解决办法: jquery的mouseenter和mouseleave方法已经修复了这个问题,可以直接用来替代mouseover和mouseout 不过有个mouseenter和mouseleave有个小问题是,让鼠标从文档外直接进入绑定事件的元素时,mouseenter不生效 暂时解决办法是,别让绑定事件的元素靠浏览器边

vue -vantUI tab切换时 list组件不触发load事件解决办法

最近由于公司项目需要,用vue写了几个简单的页面.用到了vantUI List 列表 瀑布流滚动加载,用于控制长列表的展示 当列表即将滚动到底部时,会触发事件并加载更多列表项. 看上去一切都很美好:但是tab进行切换的时候,list组件的load事件不会再次被触发!!!就是list组件做上拉加载只有在第一个tab会触发,切换后触底不会再次触发 解决办法: 初始化定义了list的加载状态 tab切换时:重新初始化一次就行了 这样就解决了tab切换list组件不能再次被触发的问题 原文地址:http

前端的事件冒泡(例如点击一次onclick事件执行两次)解决办法

问题概要: 当我运用antd 中 radio组件的时候发现radio组件是有bug的 就是你不能给他赋予id 和 value,同时也绑定不上onclick等事件.举个例子: 可以看到 你就算赋予了id 和value 前端页面渲染也是不正常的 value无论赋成什么 结果都是on但是我还需要对他进行一些操作需要绑定他的onclick事件 所以我得解决办法就是在radio标签外套了一层div 绑定了id属性,同时将onclick事件绑定在这层div上.当我们触发它时,通过jQuery的子选择器找到内

javascript阻止子元素冒泡触发父元素的mouseover、mouseout

本文并没有像标题说的那样,真正阻止事件元素的子元素冒泡... 只是在子元素冒泡到事件元素处时进行了一个判断,判断是否要触发事件,哦...不对 应该是是否要运行事件函数中的相关操作... 首先你可以猛戳这里: 问题的出现 注:jquery中的mouseover/out事件也有此问题 解决方法一: 在ie下有mouseenter 与 mouseleave事件来替代mouseover 和 mouseout. 网上很多说法,这两个事件只有ie支持,其他浏览器不支持. 但是我在最新版本的火狐与谷歌都支持了

onmouseout,mouseover经过子元素也触发的问题解决方案

在mouseout与mouseover的冒泡问题上,相信有很多朋友都遇到过.今天这里就总结一下 关于mouseover和mouseout冒泡问题的解决方案: 首先,看下event.relatedTarget的用法. relatedTarget 事件属性返回与事件的目标节点相关的节点. relatedTarget不支持IE.对于 mouseover 事件来说,该属性是鼠标指针移到目标节点上时所离开的那个节点. 对于 mouseout 事件来说,该属性是离开目标时,鼠标指针进入的节点. 对于其他类型