鼠标经过(hover)事件的延时处理

关于鼠标hover事件及延时

　　鼠标经过事件为web页面上最常见的事件之一。简单的hover可以用CSS :hover伪类实现，复杂点的用js。

　　一般情况下，我们是不对鼠标hover事件进行延时处理。但是，有时候，为了避免不必要的干扰，常会对鼠标hover事件进行延时处理。所谓干扰，就是当用户鼠标不经意划过摸个链接，选项卡，或是其他区域时，本没有显示隐藏层，或是选项卡切换，但是由于这些元素上绑定了hover事件（或是mouseover事件），且无延时，这些时间就会立即触发，反而会对用户进行干扰。

比较适用于类似场景：

像腾讯首页，此处选项卡：对鼠标经过事件进行了延时处理

　下面贴出实现代码

(function ($) {'use strict'$.fn.hoverdelay = function (options) {if (typeof options == 'string') {options = { feedback: options };}var settings = $.extend($.fn.hoverdelay.defaults, options || {});var hoverTimer, outTimer;return this.each(function () {var $own = $(this);$own.hover(function () {clearTimeout(outTimer);hoverTimer = setTimeout(function () {settings.mouseover($own);}, settings.hoverdelay);},function () {clearTimeout(hoverTimer);outTimer = setTimeout(function () {settings.mouseout($own);}, settings.hoverremove);});});};$.fn.hoverdelay.defaults = {hoverdelay: 3000,hoverremove: 50,mouseover: function (selector) { },mouseout: function (selector) { }};})(jQuery);

以上代码收集自：海丁网。张鑫旭博客详细介绍了此种情况，也给出了实现方式，二者代码没什么差别，个人只是更习惯海丁网参数的命名方式。

我可是最爱用的 Camel 啊，这不科学...

转载于:https://www.cnblogs.com/v10258/p/3259735.html

鼠标经过(hover)事件的延时处理相关推荐

html鼠标经过盒子延时显示,jQuery 鼠标经过(hover)事件的延时处理示例
一.关于鼠标hover事件及延时鼠标经过事件为web页面上非常常见的事件之一.简单的hover可以用CSS :hover伪类实现,复杂点的用js. 一般情况下,我们是不对鼠标hover事件进行延时处 ...
js动态渲染的页面发现鼠标悬浮hover事件失效
在开发上,页面是通过调用ajax调用生成的HTML元素节点,发现鼠标悬浮hover事件失效了 $(function(){$.ajax({type:'post',url:ctx+'hbk/task/al ...
vue的hover鼠标悬停hover事件
vue中没有hover,可以使用css伪类:hover 或者@mouseenter @mouseleave @mouseover @mouseout 等处理类似需求
jQuery hover事件鼠标滑过图片半透明标题文字滑动显示隐藏
1.效果及功能说明 hover事件制作产品图片鼠标滑过图片半透明,标题文字从左到右滑动动画移动显示隐藏 2.实现原理首先把效果都隐藏,然后定义一个伪类来触发所有的效果,接下来当触发伪类后会有一个遍历 ...
jQuery鼠标事件与hover事件
(作者:老薛,撰写时间:2019年5月13日) 在我学到jQuery鼠标事件,我知道了jQuery鼠标事件列表中有很多事件,它们分别是:1.click 单击事件.2.dbclick 双击事件.3.mo ...
Echarts 饼图总数展示与鼠标hover事件
效果图: 解决思想: 总数展示:其为title,进行调位置 hover事件:mouseover, mouseout 代码: initPieChart(){// 初始化数据const text = '问 ...
使用jQuery的hover事件在IE中不停闪动的解决方法
在使用jQuery的hover事件时,经常会因为鼠标滑动过快导致菜单不停闪动的情况,相信很多朋友都遇到过自己做的纵向下拉菜单不停的收缩,非常的讨厌.今天在给一个网站设计菜单时也遇到了这个情况,结果在百 ...
vue划入划出事件_基于vue中对鼠标划过事件的处理方式详解
鼠标事件进行监听需求中,在一个table(组件)表中,对于其中一列(该列为图片列),当鼠标划过该列的某个单元格子(图片)时,需要展示出该单元格子对应的遮罩层翻阅了一些博客,发现好多都提到了mous ...
js(jquery)鼠标移入移出事件时，出现闪烁、隐藏显示隐藏显示不停切换的情况
<script> $(".guanzhu").hover(function(){$(".weixinTop").show();},function( ...

鼠标经过(hover)事件的延时处理

关于鼠标hover事件及延时

鼠标经过(hover)事件的延时处理相关推荐

最新文章

热门文章