的JavaScript的onmouseover並不如預期

我有了這個HTML的JavaScript的onmouseover並不如預期

<div onmouseover="seth1();"> 
    <a onclick="showh1();">h1</a> 
    <a onclick="showh2();">h2</a> 
</div> 

<div id="h1" style="display: none;"></div> 
<div id="h2" style="display: none;"></div>

，這JavaScript來自動顯示h1 4秒後或顯示器的一個工作既當用戶點擊

var settime; 
function seth1() { 
    settime = setTimeout('showh1();', 4000); 
} 
function showh1() { 
    clearTimeout(settime); 
    document.getElementById('h1').style.display = "block"; 
} 
function showh2() { 
    clearTimeout(settime); 
    document.getElementById('h2').style.display = "block"; 
}

但是，當我點擊顯示h2它也顯示h1，我錯在哪裏？我是新手，所以請原諒我的編碼。謝謝。

來源

2015-10-20 Facu Subiabre

你的例子工作得很好，但發生的事情你可能沒有想到。

onmouseover如果您的目標速度太慢，您的鼠標光標會被觸發不止一次。如果你可以設置你的鼠標光標到你的h2鏈接真的很快，那麼onmouseover將只會觸發一次，你的h1 div將不會顯示。

如果將鼠標光標移動太慢，seth1()將被多次調用，因此將多個值分配給settime。如果settime被覆蓋，則第一個（幾個）呼叫不能再被取消，因爲他們的ID已經消失。

在您的showh2()方法中，您可以訪問settime的當前值，因此可能只有seth1()的最後一次調用將被取消。所有其他人都會繼續，所以您的h1 DIV將在您首次使用第一個DIV後四秒鐘顯示。

它自己的測試，檢查控制檯日誌：https://jsfiddle.net/krbbyzaq/2/

來源

2015-10-20 12:54:10 Marc

這樣做是爲了在元素<a onclick="showh2();">h2</a>點擊，因爲發生的事情，你一定需要觸發包裝DIV鼠標懸停事件。如果您不想在點擊該元素時觸發鼠標懸停，則應將事件偵聽器應用於該元素，並將其從包裝div中移除。您還應該嘗試探索onmouseenter事件。它可以更好地滿足您的特殊需求。

檢查這個例子來看看這是你在找什麼 - >https://jsfiddle.net/krbbyzaq/4/

來源

2015-10-20 13:24:55 henser

我也可以在你的jsfiddle中產生奇怪的結果。只需輸入h1幾次，然後單擊h2。無論如何H1都出現了。猜猜他的主要意圖是取消一次超時。 – Marc

因此點擊'h2'應該取消h1超時？ – henser

我不想來苛刻，但是......您複製了我的JSFiddle並沒有閱讀我的答案？如果您啓動多個超時，則必須取消多個超時。 – Marc

謝謝兩位的幫助。現在我明白我的問題更好了。我終於通過此解決：

HTML

<div id="setter" onmouseover="seth1();" style="height: 10px; width: 100%;"> 
<div> 
    <a onclick="showh1();">h1</a> 
    <a onclick="showh2();">h2</a> 
</div>

的JavaScript

var settime; 
function seth1() { 
    settime = setTimeOut('showh1();', 4000) 
    document.getElementById('setter').style.width = "0px"; 
} 
function showh1() { 
    clearTimeout(settime); 
    document.getElementById('h1').style.display = "block"; 
} 
function showh2() { 
    clearTimeout(settime); 
    document.getElementById('h2').style.display = "block"; 
}

所以用戶只能觸發seth1（）一次。比你這麼多的幫助！

來源

2015-10-20 15:07:08

的JavaScript的onmouseover並不如預期

回答

相關問題