質問

以下を実行するWebページでスクリプトを設定しようとしています。マウスが一定の時間(たとえば5秒)非アクティブである場合、アクションを実行します(たとえば、要素を隠す)。次に、移動したマウスの場合、アクションを実行します(たとえば、要素を非表示にします)。

私が望んでいるのは、ユーザーマウスの不活性(必ずしもキーボードの非アクティブではない)でアクションを実行する方法です。

ご協力いただきありがとうございます。

役に立ちましたか?

解決

jqueryを使用している場合:

(function() {
    var timeout;
    var isHidden = false;
    $(document).mousemove(function() {
        if (timeout) {
            window.clearTimeout(timeout);
        }
        timeout = window.setTimeout(function() {
            if (!isHidden) {
                //hide the element here
                isHidden = true;
            }
        }, 5000);
        if (isHidden) {
            //show the element here
            isHidden = false;
        }
    });
})();

非jQueryバージョン:

(function() {
    var timeout;
    var isHidden = false;

    function hideOnIdle() {
        if (timeout) {
            window.clearTimeout(timeout);
        }
        timeout = window.setTimeout(function() {
            if (!isHidden) {
                //hide the element here
                isHidden = true;
            }
        }, 5000);
        if (isHidden) {
            //show the element here
            isHidden = false;
        }
    }

    if (document.addEventListener) {
        document.addEventListener("mousemove", hideOnIdle);
    } else {
        document.attachEvent("onmousemove", hideOnIdle);
    }
})();

jsfiddle

ライセンス: CC-BY-SA帰属
所属していません StackOverflow
scroll top