純粋なjavascriptの要素をどれくらい長くホバーするかを確認するには？

Question

要素が2秒以上ホバーされているときにトゥイップを表示したい。どうしたらいいですか？

Answer 1

var startTime, endTime; 
 

 

 
function handlerIn() { 
 
    startTime = new Date(); 
 
} 
 

 
function handlerOut() { 
 
    endTime = new Date(); 
 
    var timeDiff = endTime - startTime; //in ms 
 
    // strip the ms 
 
    timeDiff /= 1000; 
 

 
    // get seconds 
 
    var seconds = Math.round(timeDiff % 60); 
 
    console.log("hover during " + seconds + " sec"); 
 
}

.hover { 
 
    background-color: red; 
 
    width: 100px; 
 
    height: 100px; 
 
}

<div class="hover" onmouseenter="handlerIn()" onmouseleave="handlerOut()">HOVER ME</div> 
 

 
<div id="seconds"></div>

Answer 2

あなたはonmouseenter="fn()"とonmouseout="fn()"で入力した時間と終了時間を確認することができます。これを行う簡単な方法があり、時間もミリ秒単位で表示されます！

var time = 0; 
 
var hover = 0; 
 
var out = 0; 
 

 
function getInTime() { 
 
    hover = Date.now(); 
 
} 
 

 
function getOutTime() { 
 
    out = Date.now(); 
 
    time = out-hover; 
 
    document.getElementById('time').innerHTML = " Show hover time: " + time + 'ms'; 
 
}

<button onmouseout="getOutTime()" onmouseenter="getInTime()" >Hover Here</button> 
 
<br /><br /> 
 
<button id="time">Hover Time</button>

Answer 3

あなたはonmouseover属性とイベントONMOUSEOUTたsetTimeout（）メソッドを使用することができます。

ツールチップのCSS： http://www.w3schools.com/howto/howto_css_tooltip.asp

setTimeoutメソッド：http://www.w3schools.com/jsref/met_win_settimeout.asp

<div id="example" class="tooltip" onmouseover="start()" onmouseout="stop()">example text</div> 

let t, hoverTime=2000; 

function start(){ 
    t = setTimeout('showTooltip()', hoverTime); 
} 

function showTooltip(){ 
    let node = document.createElement("span"); 
    let textnode = document.createTextNode("Tooltip text"); 
    node.className='tooltiptext'; 
    node.appendChild(textnode); 
    document.getElementById("example").appendChild(node); 
} 

function stop(){ 
    clearTimeout(t); 
    if(document.getElementById("example").childNodes[1]){ 
     document.getElementById("example").removeChild(document.getElementById("example").childNodes[1]); 
    } 
}