在鼠標移動和點擊上更改狀態

Question

我有這個隱藏了4秒鐘不活動的div的javascript。

var timeout; 
var isHidden = false; 

function hideOnIdle() { 
if (timeout) { 
    clearTimeout(timeout); 
} 
timeout = setTimeout(function() { 
    if (!isHidden) { 
     document.getElementById("slide").style.opacity = "0"; 
     isHidden = true; 
    } 
}, 4000); 
if (isHidden) { 
    document.getElementById("slide").style.opacity = "1"; 
    isHidden = false; 
} 
} 

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

如果您移動鼠標，這將再次顯示div。

如何修改javascript並在點擊後再次顯示div？

https://jsfiddle.net/Lcqumf2y/

謝謝。

Answer 1

我改變了你的jsfiddle例如：

var timeout; 
 
var isHidden = false; 
 

 
function hideOnIdle() { 
 
    if (timeout) { 
 
     clearTimeout(timeout); 
 
    } 
 
    timeout = setTimeout(function() { 
 
     if (!isHidden) { 
 
      hide(); 
 
     } 
 
    }, 4000); 
 
    if (isHidden) { 
 
     show(); 
 
    } 
 
} 
 

 
function hide() { 
 
    document.getElementById("slide").style.opacity = "0"; 
 
    isHidden = true; 
 
} 
 

 
function show() { 
 
    document.getElementById("slide").style.opacity = "1"; 
 
    isHidden = false; 
 
} 
 

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

#slide { 
 
    transition: all .2s linear; 
 
}

<div id="slide">ABC123</div>