Javascript使用setTimeout單擊並按住元素

我需要在我的web應用程序中具有某些功能，當用戶單擊並保存元素時發生特定操作。想想它就像在Android上長按。Javascript使用setTimeout單擊並按住元素

我有我的div：

<div id="myDiv" 
    onmousedown="press()" 
    onmouseup="cancel()" 
    onmouseout="cancel()" 
    onmousemove="cancel()">Long Click Me</div>

和我的javascript：

var down = false; 

function press() 
{ 
    down = true; 
    setTimeout(function() { action(); }, 1500); 
} 

function cancel() 
{ 
    down = false; // this doesn't happen when user moves off div while holding mouse down! 
} 

function action() 
{ 
    if (!down) 
    return; // if the flag is FALSE then do nothing. 

    alert("Success!"); 
    down = false; 
}

這工作只要我要做的就是按下並按住元素。我有onmouseout和onmousemove事件調用cancel（），因爲我希望用戶可以選擇在action（）開始之前更改主意並將鼠標從元素上移開。

不幸的是，我的代碼似乎並沒有這樣做。事實上，如果使用點擊一下，將鼠標從div上移開並在012秒之前在之前釋放，那麼action（）將不會按預期保留。

編輯：感謝您的輸入所有人，但事實證明，我只是有點特殊並沒有看到，我忘了在我的HTML大寫字母在我的onmouseout。我上面給出的示例代碼應該完全按照預期工作。

來源

2011-07-26 Ozzah

這是發生在所有瀏覽器或只是一些？爲什麼不讓[jsfiddle]（http://jsfiddle.net/）讓其他人測試它？也不要使用布爾，只需使用'var'，JavaScript是動態輸入的。 –

我在我的代碼中有var，當我寫這個例子的時候，我不小心寫了bool。 – Ozzah

夥計們，不要回答。我問了這個問題，我很抱歉。問題不在於動作（）開始 - 我有一個測試：if（！down）return;所以這不是問題。問題在於，如果用戶按下鼠標按鈕將鼠標移出div，則不會調用cancel（）。這只是一個玩具的例子來說明我的問題;我實際上*需要*在1.5秒之前移除div時調用cancel（），否則之後短時間點擊將不起作用等。 – Ozzah

當然action（）仍然被調用。你實際上並沒有取消setTimeout()功能。我懷疑，也許在你真實的代碼中，你有一個範圍問題，也許沒有測試你認爲你的變量是相同版本的done。

比使用down標誌更好的方法是跟蹤setTimeout()的返回值並實際取消cancel()函數中的計時器。然後，當你不需要時，action()永遠不會開火。我認爲從技術角度來看，當鼠標取消任何定時器觸發的機會時，這也是更正確的行爲。

而且，是沒有這樣的事：

bool down = false;

在JavaScript

。它必須是：

var down = false;

我建議這樣的代碼：

var downTimer = null; 

function down() 
{ 
    cancel(); 
    downTimer = setTimeout(function() { action(); }, 1500); 
} 

function cancel() 
{ 
    if (downTimer) 
    { 
    clearTimeout(downTimer); 
    downTimer = null; 
    } 
} 

function action() 
{ 
    downTimer = null; 
    alert("Success!"); 
}

來源

2011-07-27 00:10:08 jfriend00

1）請參閱我對主要問題的評論：在編寫示例Q時，我犯了一個錯誤，我有var。 2）你有沒有注意到前兩行動作（）測試看到'down'標誌？我想我應該更好地表述這個問題：改變「爲什麼行動（）仍然被稱爲」爲什麼不行動（）按預期拯救？「 – Ozzah

在你真實的代碼中，我會懷疑你的'down'變量的範圍問題，這樣你就不會測試你認爲你是'down'變量的同一個副本。你在這裏寫的樣本（當你糾正錯字）在我看來，它應該工作。但是，我認爲取消定時器更好，而不僅僅是設置標誌，我認爲當鼠標離開時它會稍微更正確一些。 – jfriend00

我發現了這個問題。我在我的div中輸入了一個錯字。我忘了一個大寫字母。爲什麼Zend沒有自動完成javascript :( – Ozzah

您還需要清除超時在取消功能 - 否則仍然會閃光 - 如您在啓動它下拉功能。

所以..

bool down = false; 
//your timeout var 
var t; 

function down() 
{ 
    down = true; 
    t = setTimeout(function() { action(); }, 1500); 
} 

function cancel() 
{ 
    down = false; 
clearTimeout(t); 
} 

function action() 
{ 
    if (!down) 
    return; 

    alert("Success!"); 
    down = false; 
}

來源

2011-07-27 00:16:36 Michal

取消在取消（）函數的超時，使用

var mytimer = null; 

function ondown(){mytimer = setTimeOut('action()', 1500;)} 

function cancel(){clearTimeout(mytimer);} 
function action(){mytimer=null; alert('success!');}

還注意，使用第一down作爲變量端則作爲函數.. 。調用if(!down)將始終返回false，因爲down引用了一個函數。

來源

2011-07-27 00:16:58 Remi

當我看到它時，代碼有幾個錯誤。

首先

bool down = false;

不是有效的JavaScript。它應該是

var down = false;

然後你有兩個變量稱爲down：布爾值和功能。該函數將覆蓋該變量，直到執行其中一個將down設置爲true或false的語句。

正如其他人所說：一旦設置，延遲功能將在1.5秒後繼續執行，除非您取消超時。但是再次無關緊要，因爲您在做任何事之前都會檢查鼠標按鈕是否關閉。

所以我會說重命名爲布爾變量isMouseDown什麼的，然後再試一次。

來源

2011-07-27 00:43:14 jmbucknall

Javascript使用setTimeout單擊並按住元素

回答

相關問題