Home  >  Article  >  Web Front-end  >  Mouse event delay switching plug-in_javascript skills

Mouse event delay switching plug-in_javascript skills

WBOY
WBOYOriginal
2016-05-16 18:09:331168browse
原理很简单:
onmouseover、onmouseout执行业务代码时使用setTimeout进行延时,第二次触发的时候先清除掉前面的setTimeout。
原理
复制代码 代码如下:

var timer;
document.getElementById('test').onmouseover = function () {
clearTimeout(timer);
timer = setTimeout(function () {
alert('over')
}, 150);
};
document.getElementById('test').onmouseout = function () {
clearTimeout(timer);
timer = setTimeout(function () {
alert('out')
}, 150);
};

上述代码可以看到,定时器返回值(唯一ID)由timer保存着,onmouseover与onmouserout都可以清除未执行的定时器,防止重复执行。这里timer让onmouseover与onmouserout有了一个“组”的概念,我们还可以让更多的元素能够访问到“组”,例如插入式的下拉菜单与tips等触发元素与弹出层都需要共用同一个timer,这样不会因为鼠标离开导致层被关闭(只要指针还在层上)。
封装事件
复制代码 代码如下:

/*!
* hoverDelay.js
* http://www.planeArt.cn
* Copyright 2011, TangBin
* Dual licensed under the MIT or GPL Version 2 licenses.
*/
(function (pluginName) {
var id = 0, data = {},
addEvent = function (elem, type, callback) {
if (elem.addEventListener) {
elem.addEventListener(type, callback, false);
} else {
elem.attachEvent('on' + type, function () {callback.call(elem)});
};
};
this[pluginName] = function (elem, over, out, group, speed) {
id ++;
if (arguments.length === 0) return id;
if (typeof arguments[1] !== 'function') return clearTimeout(data[arguments[1]]);
if (typeof elem === 'string') elem = document.getElementById(elem);
group = group || elem[pluginName] || id;
speed = speed || 150;
elem[pluginName] = group;
addEvent(elem, 'mouseover', function () {
var elem = this,
fn = function () {over.call(elem)};
clearTimeout(data[group]);
data[group] = setTimeout(fn, speed);
});
addEvent(elem, 'mouseout', function () {
var elem = this,
fn = function () {out.call(elem)};
clearTimeout(data[group]);
data[group] = setTimeout(fn, speed);
});
};
})('hoverDelay');

data负责保存着自定义的“组”,同一“组”下甚至可以暂停mouseout的回调函数执行,这样可以实现套嵌操作。

接口说明

方法 参数 作用
hoverDelay (elem, over, out, group) 元素, 鼠标靠近时回调函数, 鼠标离开时回调函数, 设置延时分组名称[可选] 设置延时触发效果
hoverDelay (elem, group) 元素, 延时分组名称 停止鼠标离开执行的回调函数
hoverDelay () [无] 获取唯一延时分组名称
Updated on 2011-01-22
I noticed the description of the hover event in the jQuery API:
will be accompanied by a detection of whether the mouse is still in a specific element (for example, image in a div), if so, it will continue to remain in the "hover" state without triggering the move-out event (fixes a common mistake in using the mouseout event).
Is there a bug in mouseout? This reminds me that when I was working on a mouse-triggered display business card (similar to Tencent Weibo's avatar business card), the mouseout event was often executed incorrectly. So I checked how jQuery's hover source code solves this problem, and found that it uses "mouseenter" and "mouseleave" instead of "mouseover" and "mouseout". "mouseenter" and "mouseleave" are IE (6, 7, 8 ) unique events are not supported by standard browsers and need to be simulated. The final version:
Copy code The code is as follows:

/*!
* hoverDelay.js v1.1
* http://www.planeArt.cn
* Copyright 2011, TangBin
* Dual licensed under the MIT or GPL Version 2 licenses.
*/
(function (pluginName) {
var id = 0, data = {},
addEvent = function (elem, type, callback) {
if (elem.addEventListener) {
if (type === 'mouseenter') {
elem.addEventListener('mouseover', withinElement(callback), false);
} else if (type = == 'mouseleave') {
elem.addEventListener('mouseout', withinElement(callback), false);
} else {
elem.addEventListener(type, callback, false);
} ;
} else {
elem.attachEvent('on' type, function () {callback.call(elem, window.event)});
};
},
withinElement = function(callback) {
return function (event) {
var parent = event.relatedTarget;
try {
while (parent && parent !== this) parent = parent.parentNode;
if (parent !== this) callback.apply(this, arguments);
} catch(e) {};
};
};
this[pluginName] = function ( elem, over, out, group, speed) {
id ;
if (arguments.length === 0) return id;
if (typeof arguments[1] !== 'function') return clearTimeout(data[arguments[1]]);
if (typeof elem === 'string') elem = document.getElementById(elem);
group = group || elem[pluginName] || id;
speed = speed || 150;
elem[pluginName] = group;
addEvent(elem, 'mouseenter', function () {
var elem = this,
fn = function ( ) {over.call(elem)};
clearTimeout(data[group]);
data[group] = setTimeout(fn, speed);
});
addEvent(elem, ' mouseleave', function () {
var elem = this,
fn = function () {out.call(elem)};
clearTimeout(data[group]);
data[group] = setTimeout(fn, speed);
});
};
})('hoverDelay');

View version 1.1 demo
http ://demo.jb51.net/js/2011/hover/index.htm
New window opens

Download

1, Native version 1.1
2. jQuery plug-in version
Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn