`

JavaScript Mouseover Mouseout

阅读更多
有时候我们在使用 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使用详解

    主要介绍了javascript中mouseover、mouseout使用详解的相关资料,需要的朋友可以参考下

    javascript mouseover、mouseout停止事件冒泡的解决方案

    停止事件冒泡在各浏览器中已经有相应的解决方案,但是对于mouseover和mouseout却显得力不从心。

    经过绑定元素时会多次触发mouseover和mouseout事件

    javascript的mouseover和mouseout事件,在绑定元素内部有子元素的情况下, 经过绑定元素时会多次触发mouseover和mouseout事件。 jquery解决办法: jquery的mouseenter和mouseleave方法已经修复了这个问题,可以直接...

    javascript中mouseenter与mouseover的异同

    不知道大家在面试或者工作过程中有没有被 mouseover 和 mouseenter (对应的是 mouseout 和 mouseleave )事件所困扰。自己之前在面试的时候就有被问到诸如mouseover和mouseenter事件的异同之类的问题?当时没有答出来...

    JavaScript和JQuery的鼠标mouse事件冒泡处理

    简单的鼠标移动事件: 进入 代码如下: mouseenter:不冒泡 mouseover: 冒泡 不论鼠标指针穿过被选元素或其子元素,都会...给一个嵌套的层级绑定mouseout事件,会发现mouseout事件与想象的不一样 代码如下: <!DOC

    【JavaScript源代码】ECharts鼠标事件的处理方法详解.docx

    鼠标事件即鼠标操作点击图表的图形(如click、dblclick、contextmenu)或hover图表的图形(如mouseover、mouseout、mousemove)时触发的事件。 在ECharts中,用户的任何操作,都可能会触发相应的事件。在ECharts中...

    jQuery-mouseDelay:重新编码hoverIntent插件,该插件利用特殊事件为“ mouseover”和“ mouseout”事件添加功能,而不是替换它们

    在这种情况下,“ mouseover”和“ mouseout”事件的行为会更改,因此在触发之前会有一定的延迟。 由于我们要更改现有事件而不是创建新事件,因此可以将mouseDelay添加到任何项目中,它将“正常工作”,而不必将...

    【JavaScript源代码】vue2+elementui进行hover提示的使用.docx

     vue2+elementui进行hover提示分为外部和内部,内部使用el-tooltip,外部使用mouseover和mouseout来让提示框显隐(两个事件要做节流处理,事件要在beforedestroy中销毁)  <template> <div class="hello"> <!-- ...

    JavaScript Event学习第九章 鼠标事件

    先看看都有哪些鼠标事件:mousedown,mouseup_and_click,dblclick,mousemove和mouseover mouseout。然后还会解释一下relatedTarget,fromElement和toElement这些事件属性。最后是微软的mouseenter和mouseleave事件。 ...

    【JavaScript源代码】Vue图片放大镜组件的封装使用详解.docx

    Vue图片放大镜组件的封装使用详解 ...效果图如下: 实现图片放大镜效果的Vue组件代码如下: <template> <div> <div class="move" @mouseover="over()" @mouseout="out()" @mousemove="move($event)">  

    FIF DW教程四五六章

    第四章、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 服务

    JavaScript仿苹果风格图标滑出式导航菜单

    这里不能用Event.addListener 和 Event.on方式去侦听事件,因为icon动画时会移至A标签上层,导致监听对象发生变化,用relatedTarget判断span标签也会触发多次mouseover和mouseout。所以,将鼠标事件的触发给LI是最好...

    原生JavaScript实现Tooltip浮动提示框特效

    使用原生JavaScript设计和实现Tooltip浮动提示框特效,了解代码简化、事件绑定、事件冒泡等技巧和知识。 特效四个关键点: 显示:鼠标移到ToolTip超链接上时,ToolTip提示框可以...对应mouseout  只有在鼠标指针穿过

    Javascript 浏览器事件小结

    事件本身相当直观,常用的有: 事件 描述 abort 图片被阻止而不能加载 blur,focus 失去焦点,获得焦点 ...mouseover,mouseout over是当鼠标进入的时候出发,out是离开的时候触发 mousemove 鼠标移动 reset,s

    javascript编程起步(第五课)

    鼠标事件(上) 随着课程的进行,能跟着下来的人是越来越少了,不知道是不是因为没有太多的表现,只是死记的东西...2.mouseout(鼠标移出) 3.mousemove(鼠标移动) 4.mousedown(鼠标按下) 5.mouseup(鼠标弹起) 6.

    JavaScript 复制功能代码 兼容多浏览器(ZeroClipboard)

    mouseOut 鼠标移出事件 mouseDown 鼠标按下事件 mouseUp 鼠标松开事件 complete 复制成功事件 其中 mouseOver 事件和 complete 事件比较常用。 前面说过,如果需要动态改变待复制的内容,那 mouseOver 事件就可以派...

    基于JavaScript的三维地图程序(仿e都市gis)

    1.增加建筑物高亮显示(还需完成鼠标mouseover和mouseout事件) 2009-8-18 1.完成建筑物高亮显示,有点小bug 2009-8-19 1.增加记录原始缩放比例的全局变量 2.解决建筑物高亮显示bug 2009-8-20 1.增加三维全景展示...

Global site tag (gtag.js) - Google Analytics