鼠标事件延时切换插件-javascript技巧
时间：2016-04-09原理很简单：
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的回调函数执行，这样可以实现套嵌操作。
2011-01-22更新
我注意到jQuery API中关于hover事件的说明：
会伴随着对鼠标是否仍然处在特定元素中的检测（例如，处在div中的图像），如果是，则会继续保持“悬停”状态，而不触发移出事件（修正了使用mouseout事件的一个常见错误）。
mouseout有BUG？这让我想起了我曾经工作中制作一个鼠标触发显示名片（类似腾讯微博的头像名片）经常被错误的执行了mouseout事件。于是我又查阅了jQuery的hover源码如何解决这个问题，发现它是使用“mouseenter”与“mouseleave”代替了“mouseover”与“mouseout”，“mouseenter”与“mouseleave”是IE(6、7、8)特有的的事件，标准浏览器并不支持，需要进行模拟，最终版本：
/*!
* 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');
查看1.1版演示
http://demo.jb51.net/js/2011/hover/index.htm
新窗口打开
下载
1、原生版1.1
2、jQuery插件版
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 () | [无] | 获取唯一延时分组名称 |
我注意到jQuery API中关于hover事件的说明：
会伴随着对鼠标是否仍然处在特定元素中的检测（例如，处在div中的图像），如果是，则会继续保持“悬停”状态，而不触发移出事件（修正了使用mouseout事件的一个常见错误）。
mouseout有BUG？这让我想起了我曾经工作中制作一个鼠标触发显示名片（类似腾讯微博的头像名片）经常被错误的执行了mouseout事件。于是我又查阅了jQuery的hover源码如何解决这个问题，发现它是使用“mouseenter”与“mouseleave”代替了“mouseover”与“mouseout”，“mouseenter”与“mouseleave”是IE(6、7、8)特有的的事件，标准浏览器并不支持，需要进行模拟，最终版本：
代码如下:
/*!
* 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');
查看1.1版演示
http://demo.jb51.net/js/2011/hover/index.htm
新窗口打开
下载
1、原生版1.1
2、jQuery插件版
相关文章
移动端，手机端 响应式布局头部代码将如下代码加到你网页的头部之间： meta name=viewport content=width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no - javascript实现禁止鼠标右键的功能遇到网页上有精美图片或者精彩文字想保存时，通常大家都是选中目标后按鼠标右键，在弹出菜单中选择图片另存为或复制来达到我们的目的。但是，目前有许多网页都屏
js实现点击按钮复制文本功能最近遇到一个需求，需要点击按钮，复制 p 标签中的文本到剪切板 之前做过复制输入框的内容，原以为差不多，结果发现根本行不通 尝试了各种办法，最后使了个障眼- 如何去掉html中input的边框这里不能用css样式选择器选择input组件，设置 border:none;或border: 0px;outline:none;cursor: pointer; 亲测没有用处，只有写这种格式时生效，如下： input ty
- js 判断字符串中是否包含某个字符串String对象的方法 方法一: indexOf() (推荐) var str = 123;console.log(str.indexOf(3) != -1 ); // trueindexOf() 方法可返回某个指定的字符串值在字符串中首
- video标签设置autoplay在手机浏览器无法自动播放视频的解决方案在video标签上加个autoplay属性，在PC端浏览器里面运行流畅，但是在手机浏览器里面打开无法播放。原来现在的手机浏览器是不允许网页中视频自动播放的，只有与用
何为百度移动网站MIP？MIP对网站有什么帮助？随着移动互联网的发展，网友们对于移动产品服务体验要求也越来越高，当然了像移动网站体验也包括在内，随着互联网技术的发展，现在移动网站页面技术也一直在提升和创新，今