JavaScriptはsetTimeoutを使用して要素をクリックして保持する

Question

ユーザーがクリックして要素を保持したときに特定のアクションが発生するWebアプリケーションにいくつかの機能が必要です。それはAndroidの長いプレスのように考えてください。

私は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イベントを持っています。私は、アクションを開始する前に、ユーザーが気を付けてマウスを要素から離してしまうようにしたいからです。

残念ながら、私のコードはこれをしないようです。 実際、使用が一瞬クリックされた場合、マウスをdivから離してを解放してからの1.5秒後に、action（）は期待どおりに取り崩されません。

編集：あなたの入力皆のおかげで、それは私が特別少しだけだが判明したと私は私れるonmouseoutで、私のHTMLでの大文字を忘れてしまったことがわかりませんでした。上記のサンプルコードは、期待どおりに動作するはずです。

Answer 1

もちろん、action（）はまだ呼び出されています。あなたは実際にsetTimeout()機能をキャンセルしませんでした。あなたの本当のコードでおそらくスコープの問題があり、同じバージョンのdone変数をテストしていないと思われます。

downフラグを使用するよりも良い方法は、戻り値をsetTimeout()から追跡し、実際にはcancel()機能でタイマをキャンセルすることです。その後、あなたがしたくないときは、action()は決して発射しません。私はそれが技術的にはより正確な動作だと思うので、タイマーを放つチャンスをキャンセルするためにマウスを離してください。 JavaScriptで

bool down = false; 

：

また、のようなものはありません。私はこのコードをお勧めします

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!"); 
} 

Answer 2

あなたはまた、あなたのキャンセル機能でタイムアウトをクリアする必要があることがなければならないであろうダウン機能。キャンセル（）関数内でタイムアウトをキャンセルする

..だから

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; 
} 

Answer 3

は、

var mytimer = null; 

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

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

を使用また、あなたがその関数として変数エンドとして最初downを使用していることに注意してください。.. downは関数を参照するので、if(!down)を呼び出すと常にfalseが返されます。

Answer 4

あなたのコードにはいくつか問題があります。

まず

bool down = false; 

はJavaScriptを有効ではありません。

var down = false; 

downという2つの変数があります。ブール値と関数です。 downをtrueまたはfalseに設定するステートメントの1つを実行するまで、関数は変数を上書きします。

他の人は言ったように：一度設定すると、タイムアウトをキャンセルしない限り、遅延機能は1.5秒後に実行され続けます。しかし、何かをする前にマウスボタンが押されているかどうかをチェックするので、もう一度やり直してください。

だから私はブール変数の名前をisMouseDownまたは何かに変更してもう一度やり直すといいでしょう。