JavaScript-关于hover事件的疑问?

Web程序数据库 Web程序数据库 主题:1214 回复:2505

JavaScript-关于hover事件的疑问?

浮生未歇 发布于 2017-04-23 字数 615 浏览 1257 回复 2

hover事件包含了两个函数。一个可以看做是mouseover,另一个可以看做是mouseout。
在新浪微博,当指向用户头像,延时加载用户tips名片。新浪微博中鼠标可以很自然的在头像与名片直接切换。
我在做一个功能是,尝试用hover来做,当用户指向头像的时候,延时200响应mouseover事件(如果200毫秒内发生mouseout事件就摧毁mouseover事件),然后ajax请求数据填充到名片里显示出来。这个时候问题就出现了:当我要不鼠标由头像指向名片的时候势必会触发mouseover事件(隐藏名片),而我的需求是把鼠标移到名片上不会触发mouseover事件,移到其他地方时触发mouseover事件,好像没有if(xxx mouseover)这样的判断条件。表述得有点乱,希望有人能看得懂

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

支持 Markdown 语法,需要帮助?

评论(2

甜柠檬 2017-08-22 2 楼

要是用setTimeout来控制延迟操作的话,你可以在mouseover和mouseout方法内部首行用clearTimeout(timer)销毁即将触发创建或移除tip的动作.

  //如
var timer;
avatar.mouseover(function(){
clearTimeout(timer);
//create tip
timer = setTimeout(function(){
//
}, 500);
})
.mouseout(function(){
clearTimeout(timer);
//remove tip
timer = setTimeout(function(){
//
}, 300);
})

夜无邪 2017-04-29 1 楼

你的做法没有问题,就是需要给tips名片也加hover事件。

如果使用timer的方式如下:

var timer = null;

$(头像).hover(function(){
    clearTimeout(timer);
    //加载数据并显示tips
    $(tips名片).show();
},
function(){ 
    timer = setTimeout(function(){
        $(tips名片).hide();
    },300);

});
//tips名片hover事件
$(tips名片).hover(function(){
    clearTimeout(timer);
},function(){
     timer = setTimeout(function(){
        $(tips名片).hide();
    },300);
})

或者使用下面方式:

$(头像).hover(function(){
    //加载数据并显示tips
    $(tips名片).show();
},
function(e){ 
    //鼠标离开头像,判断是不是移动到 tips名片上,我这里用户id举例判断
    if(e.relatedTarget.id != 'tips'){
        $(tips名片).hide();
    }     
});

$(tips名片).mouseout(function(e){
    //鼠标移离开名片上,判断是否回到了头像上,这里使用 class举例。
    if(e.relatedTarget.class != 'avatar'){
        $(tips名片).hide();
    }   
});