Welcome to WuJiGu Developer Q&A Community for programmer and developer-Open, Learning and Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
472 views
in Technique[技术] by (71.8m points)

如何使用JavaScript调用mouseenter鼠标放弹出图标栏上不关闭、移开鼠标自动关闭功能呢

用油猴划词搜索脚本,划词会弹出图标栏,默认6000毫秒自动关闭,如何添加函数,鼠标在图标栏上不关闭,移开鼠标后,图标栏6000毫秒自动关闭?

完整代码
浏览器搜索扩展工具

原脚本前面的图标栏的内容:

hostCustomMap = {};
    iconArray.forEach(function (obj) {
        obj.host.forEach(function (host) {// 赋值DOM加载后的自定义方法Map
            hostCustomMap[host] = obj.custom;
        });
    });
    var text = GM_getValue('search');
    if (text && window.location.host in hostCustomMap) {
        keyword.beforeCustom(hostCustomMap[window.location.host]);
    }
    var icon = document.createElement('div');
if (text && icon.style.display == 'none') {
            icon.style.top = e.pageY +15 + 'px';//设置文字下方距离
            if(e.pageX -70<10)
                icon.style.left='10px';
            else
                icon.style.left = e.pageX -70 + 'px';
                fadeIn(icon);
    
                clearTimeout(timer);
                timer = window.setTimeout(TimeOutHide, 6000);
            } else if (!text) {
                icon.style.display = 'none';
        }


    });

20200506更新:

添加JavaScript调用onmouseenter

现在是默认6000毫秒自动关闭,鼠标放图标栏上不关闭、快速移开鼠标可以自动关闭

鼠标长时间放图标栏上,再移开又不自动关闭了,求帮忙解决

    var TimeOutHide;
    var ismouseenter = false;
    icon.onmouseenter = function(){
        console.log("ismouseenter");
        if(ismouseenter == true){ //已经移入直接返回
            return;
        } else {
            ismouseenter = true; // 状态设为移入
        }
    };

    icon.onmouseleave = function(){
        console.log("ismouseleave");
        if(ismouseenter == false){
            return;
        } else {
            ismouseenter = false;
        }
    };

    TimeOutHide = function () {
        if (ismouseenter == false) {
            return icon.style.display = 'none';
            console.log("doSomethingOk");
        }
    };

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Answer

0 votes
by (71.8m points)

解决啦,在icon.onmouseenter、icon.onmouseleave中分部加入clearTimeout(timer);,清除定时就好了


与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome to WuJiGu Developer Q&A Community for programmer and developer-Open, Learning and Share
...