有时候我们在使用 mouseover 和 mouseout 的时候,可能会发生连续触发的情况。这时候我们可以使用下面三个函数来解决这个问题。
_checkHover: function(e, target){
var e = this._getEvent(e);
if(e.type == 'mouseover'){
return !this._contains(target, e.relatedTarget || e.fromElement)
&& !((e.relatedTarget || e.fromElement) === target);
}else{
return !this._contains(target, e.relatedTarget || e.toElement)
&& !((e.relatedTarget || e.toElement) === target);
}
}
_contains: function(parentNode, childNode){
if(parentNode.contains){
return parentNode != childNode && parentNode.contains(childNode);
}else{
return !!(parentNode.compareDocumentPosition(childNode) & 16);
}
}
_getEvent: function(e){
return e || window.event;
}
分享到:
相关推荐
主要介绍了javascript中mouseover、mouseout使用详解的相关资料,需要的朋友可以参考下
停止事件冒泡在各浏览器中已经有相应的解决方案,但是对于mouseover和mouseout却显得力不从心。
javascript的mouseover和mouseout事件,在绑定元素内部有子元素的情况下, 经过绑定元素时会多次触发mouseover和mouseout事件。 jquery解决办法: jquery的mouseenter和mouseleave方法已经修复了这个问题,可以直接...
不知道大家在面试或者工作过程中有没有被 mouseover 和 mouseenter (对应的是 mouseout 和 mouseleave )事件所困扰。自己之前在面试的时候就有被问到诸如mouseover和mouseenter事件的异同之类的问题?当时没有答出来...
简单的鼠标移动事件: 进入 代码如下: mouseenter:不冒泡 mouseover: 冒泡 不论鼠标指针穿过被选元素或其子元素,都会...给一个嵌套的层级绑定mouseout事件,会发现mouseout事件与想象的不一样 代码如下: <!DOC
鼠标事件即鼠标操作点击图表的图形(如click、dblclick、contextmenu)或hover图表的图形(如mouseover、mouseout、mousemove)时触发的事件。 在ECharts中,用户的任何操作,都可能会触发相应的事件。在ECharts中...
在这种情况下,“ mouseover”和“ mouseout”事件的行为会更改,因此在触发之前会有一定的延迟。 由于我们要更改现有事件而不是创建新事件,因此可以将mouseDelay添加到任何项目中,它将“正常工作”,而不必将...
vue2+elementui进行hover提示分为外部和内部,内部使用el-tooltip,外部使用mouseover和mouseout来让提示框显隐(两个事件要做节流处理,事件要在beforedestroy中销毁) <template> <div class="hello"> <!-- ...
先看看都有哪些鼠标事件:mousedown,mouseup_and_click,dblclick,mousemove和mouseover mouseout。然后还会解释一下relatedTarget,fromElement和toElement这些事件属性。最后是微软的mouseenter和mouseleave事件。 ...
Vue图片放大镜组件的封装使用详解 ...效果图如下: 实现图片放大镜效果的Vue组件代码如下: <template> <div> <div class="move" @mouseover="over()" @mouseout="out()" @mousemove="move($event)">
第四章、CSS层叠样式表 4.1 CSS的介绍 4.1.1 为什么应用CSS 4.1.2 CSS的优点 ... 5.11.5 on mouseover 事件和 on mouseout 事件 第六章、把网站放到网上 6.1 站点 6.2 WWW 服务 6.3 FTP 服务
这里不能用Event.addListener 和 Event.on方式去侦听事件,因为icon动画时会移至A标签上层,导致监听对象发生变化,用relatedTarget判断span标签也会触发多次mouseover和mouseout。所以,将鼠标事件的触发给LI是最好...
使用原生JavaScript设计和实现Tooltip浮动提示框特效,了解代码简化、事件绑定、事件冒泡等技巧和知识。 特效四个关键点: 显示:鼠标移到ToolTip超链接上时,ToolTip提示框可以...对应mouseout 只有在鼠标指针穿过
事件本身相当直观,常用的有: 事件 描述 abort 图片被阻止而不能加载 blur,focus 失去焦点,获得焦点 ...mouseover,mouseout over是当鼠标进入的时候出发,out是离开的时候触发 mousemove 鼠标移动 reset,s
鼠标事件(上) 随着课程的进行,能跟着下来的人是越来越少了,不知道是不是因为没有太多的表现,只是死记的东西...2.mouseout(鼠标移出) 3.mousemove(鼠标移动) 4.mousedown(鼠标按下) 5.mouseup(鼠标弹起) 6.
mouseOut 鼠标移出事件 mouseDown 鼠标按下事件 mouseUp 鼠标松开事件 complete 复制成功事件 其中 mouseOver 事件和 complete 事件比较常用。 前面说过,如果需要动态改变待复制的内容,那 mouseOver 事件就可以派...
1.增加建筑物高亮显示(还需完成鼠标mouseover和mouseout事件) 2009-8-18 1.完成建筑物高亮显示,有点小bug 2009-8-19 1.增加记录原始缩放比例的全局变量 2.解决建筑物高亮显示bug 2009-8-20 1.增加三维全景展示...