关于鼠标hover事件及延时

一、关于鼠标hover事件及延时

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

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

例如,在腾讯网首页,几乎对所有的鼠标经过事件进行了延时处理,例如其选项卡:
腾讯首页选项卡 张鑫旭-鑫空间-鑫生活

或是其顶部的搜搜导航条,见下图:
腾讯网首页搜搜搜索栏 张鑫旭-鑫空间-鑫生活

二、实例及演示

本文的主要内容就是展示我前几天写的鼠标延迟的方法,jQuery下的方法,水平拙劣,仅供参考。本文就以腾讯网首页搜搜搜索栏的一些鼠标经过效果为实例,演示jQuery下的延时处理。下图为demo页面的效果截图:
jQuery鼠标延迟demo截图 张鑫旭-鑫空间-鑫生活

您可以狠狠地点击这里:腾讯搜搜搜索框延迟demo

三、代码与实现

说到延时,离不开window下的setTimeout方法,本实例的jQuery方法的核心也是setTimeout。代码不长,完整如下:

(function($){    $.fn.hoverDelay = function(options){        var defaults = {            hoverDuring: 200,            outDuring: 200,            hoverEvent: function(){                $.noop();            },            outEvent: function(){                $.noop();            }        };        var sets = $.extend(defaults,options || {});        var hoverTimer, outTimer;        return $(this).each(function(){            $(this).hover(function(){                clearTimeout(outTimer);                hoverTimer = setTimeout(sets.hoverEvent, sets.hoverDuring);            },function(){                clearTimeout(hoverTimer);                outTimer = setTimeout(sets.outEvent, sets.outDuring);            });        });    }})(jQuery);

这段代码的目的在于让鼠标经过事件和延时分离的出来,延时以及延迟的清除都已经由此方法解决了。您所要做的,就是设定延时的时间大小,以及相应的鼠标经过或是移除事件即可。举个简单的例子吧,如下代码:

$("#test").hoverDelay({    hoverEvent: function(){        alert("经过我!");    }});

表示的含义是id为test的元素在鼠标经过后200毫秒后弹出含有“经过我!”文字字样的弹出框。

关于此js,您可以狠狠地点击这里:jquery.hoverdelay.js(725字节)

ok,现在应用到本文的实例上。

腾讯网的首页的搜索框上面除了鼠标经过延时,其换肤也是值得一提的,关于换肤我之前也提过,在jQuery-马化腾产品设计与用户体验的一些技术实现一文中,相应的demo页面您可以狠狠地点击这里:腾讯首页个性化换肤demo页面

首先,展示下腾讯首页搜索栏的主要HTML结构域代码:

<div id="sosoFod">    <h3 id="sosoweb" class="s1">网页</h3>    <h3 id="sosoimg" class="s2">图片</h3>    <h3 id="sosovid" class="s2">视频</h3>    <h3 id="sosomus" class="s2">音乐</h3>    <h3 id="sososoba" class="s2">搜吧</h3>    <h3 id="sosowenwen" class="s2">问问</h3>    <h3 id="sosoqz" class="s2">博客</h3>    <h3 style="cursor:pointer;" class="s2">更多▼        <div style="display:none;" class="more" id="tm">          <ul>            <li><a href="#">综合</a></li>            <li><a href="#">新闻</a></li>            <li><a href="#">词典</a></li>            <li><a href="#">生活</a></li>            <li><a href="#">百科</a></li>            <li style="border-top:1px solid rgb(178, 208, 234);"><a href="#">所有产品</a></li>          </ul>       </div>    </h3></div>

与先首页代码几乎一致,如假包换。应用了本文没什么技术含量的延迟方法后,可以应用如下的代码实现延迟执行。

$(".s2").each(function(){$("#sosoFod h3").each(function(){    var that = $(this);    var id = that.attr("id");    if(id){        that.hoverDelay({            hoverEvent: function(){                $(".s1").attr("class","s2");                that.attr("class","s1");//感谢“type23”提供了绑定对象方法$(this).attr("class","s1");            }        });    }else{        that.hoverDelay({            outDuring: 1000,            hoverEvent: function(){                $("#tm").show();            },            outEvent: function(){                $("#tm").hide();            }        });    }});

唉,惭愧,代码就这样,没什么技术含量的,希望对有用的有用吧。“更多”的下拉鼠标移出后1000毫秒后下拉框隐藏。

基本上都是代码在撑页面,说点有用的东西吧。
hoverDelay方法共四个参数,表示意思如下:

hoverDuring       鼠标经过的延时时间
outDuring             鼠标移出的延时时间
hoverEvent         鼠标经过执行的方法
outEvent          鼠标移出执行的方法

四、我嚓,结语

月光大人曾说过与下面主要意思一样的话:写博客三五天写一篇重量级的文章,隔个一天两天写个简单,价值度偏低的文章,是比较不错滴。本文就属于有凑篇数之嫌的价值相对偏低的文章。加上本身js还很稚嫩,所以本文内容的方法一般般,仅供参考。

对了,我是抱有疑问的,如何在写jQuery插件组件这类公共方法时将当前对象传到设置的默认的方法中。例如本实例中,如果将当前$(this)对象传到hoverEvent或是outEvent方法中呢,希望有高人不吝赐教。

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
### 回答1: Canvas元素本身并没有提供鼠标hover事件,但是可以通过监听鼠标移动事件和计算鼠标位置来实现鼠标hover效果。 具体实现步骤如下: 1. 获取Canvas元素。 2. 监听Canvas元素的鼠标移动事件。 3. 在鼠标移动事件的回调函数中获取鼠标位置相对于Canvas元素的坐标。 4. 判断鼠标位置是否在需要hover的区域内,如果是则执行相应的操作,否则不执行。 以下是示例代码: ```javascript // 获取Canvas元素 const canvas = document.getElementById('canvas'); // 监听Canvas元素的鼠标移动事件 canvas.addEventListener('mousemove', function (event) { // 获取Canvas元素的尺寸 const rect = canvas.getBoundingClientRect(); const scaleX = canvas.width / rect.width; const scaleY = canvas.height / rect.height; // 获取鼠标位置相对于Canvas元素的坐标 const x = (event.clientX - rect.left) * scaleX; const y = (event.clientY - rect.top) * scaleY; // 判断鼠标位置是否在需要hover的区域内 if (x >= 100 && x <= 200 && y >= 100 && y <= 200) { // 执行相应的操作 // ... } else { // 不执行操作 } }); ``` 在上述代码中,我们假设需要hover的区域为Canvas元素中的一个矩形,判断鼠标位置是否在该矩形内,如果是则执行相应的操作,否则不执行。你可以根据实际需要,修改判断条件和执行操作。 ### 回答2: canvas 的鼠标 hover 事件可以通过监听 canvas 元素的 mousemove 事件来实现。当鼠标在 canvas 上移动时,可以获取鼠标的坐标,然后通过判断鼠标坐标是否在特定的区域内,来触发相应的 hover 效果。 具体实现方法如下: 1. 获取 canvas 元素,并监听 mousemove 事件。 2. 在 mousemove 事件的回调函数中,获取鼠标的坐标。 3. 判断鼠标坐标是否在特定的区域内,可以通过判断鼠标坐标与区域的边界关系来实现。例如,可以通过比较鼠标坐标与矩形区域的左上角和右下角的坐标来确定是否在矩形区域内。 4. 如果鼠标在特定的区域内,则触发相应的 hover 效果,例如改变区域的颜色或者显示提示信息等。 需要注意的是,在 canvas 中实现鼠标 hover 事件相对于其他元素(如普通的 HTML 元素)会稍微复杂一些,因为 canvas 是一个画布,它绘制的是静态图形,没有内置的 hover 功能。但是通过监听鼠标事件并结合坐标的判断,我们可以实现类似的效果。 如果要在 canvas 中实现更复杂的鼠标交互,可以通过绘制不同的图形,并在鼠标事件中进行逻辑判断,根据鼠标坐标与图形之间的关系来触发相应的效果。这需要结合具体的需求和场景来实现。 ### 回答3: canvas鼠标hover事件是指当鼠标悬停在canvas元素上时触发的事件。在canvas中,如果我们想要实现鼠标hover效果,需要通过以下步骤完成: 1.获取canvas元素并添加鼠标移动事件监听器。 2.在事件处理程序中,获取当前鼠标相对于canvas元素的坐标。 3.遍历canvas中的元素,判断鼠标坐标是否在元素范围内。 4.如果鼠标在某个元素范围内,根据需要执行相应的操作,比如改变元素的颜色、透明度等。 5.如果鼠标不在任何元素范围内,可以进行一些默认处理,比如恢复元素的初始状态。 需要注意的是,canvas本身并不支持鼠标hover事件,所以我们需要手动实现这个功能。这个过程需要计算鼠标相对于canvas的坐标,然后根据具体需求进行判断和处理。 另外,值得一提的是,如果在 canvas 元素上绘制了复杂的图形,需要对每个图形进行坐标计算和判断,这可能会比较繁琐。因此,如果需要添加复杂的交互效果,建议使用专门的图形库或框架,比如D3.js或Three.js,它们提供了更丰富的事件处理功能和更简便的方法来实现鼠标hover效果。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值