タッチスタートイベントが当初隠しボタンで動作していません

-1

私はAndroidアプリを作成しており、2つのボタンがあります。 1スタートと1ストップ。開始ボタンをクリックすると停止ボタンが表示され、停止ボタンが表示されて非表示になります。タッチスタートイベントが当初隠しボタンで動作していません

私はSTOPボタンでタッチスタートイベントを取得しようとしています（開始ボタンに追加することは必須ですが、必須ではありません）。しかし、私の下のコードは何らかの理由で正しく動作していません。いくつか私は私が逃したことを知らせてください。

背景： - 私のボタンを隠すためにjqueryのを使用して - 背景画像とボタンが

JAVASCRIPT：

var b=document.getElementById('STOP'),start=0; 

//Check for touchstart 
if('ontouchstart' in document.documentElement) 
{ 
    document.getElementById("notouchstart").style.display = "none"; 
} 

//Add a listener that fires at the beginning of each interaction 
[b].forEach(function(el){el.addEventListener('touchstart',interact);}); 

//Add the event handlers for each button 
b.addEventListener('touchstart',highlight); 

//Functions Store the time when the user initiated an action 
function interact(e) 
{ 
    start = new Date(); 
} 

//Highlight what the user selected and calculate how long it took the action to occur 
function highlight(e) 
{ 
    e.preventDefault(); 
    e.currentTarget.className="active"; 
    if(start) 
    { 
     alert("test") 
    } 
    start = null; 
}

HTMLボタン：

<INPUT TYPE="button" style="background:url(images/Start_Btn.png); background-color:transparent; width:150px; height:186px; border:none; cursor:pointer;" id="START" onClick="startBTN();"> 
<INPUT TYPE="button" style="background:url(images/Stop_Btn.png); background-color:transparent; width:150px; height:186px; border:none; cursor:pointer;" id="STOP">

出典

2012-02-21 LandL Partners

私は私の問題を解決しました。私はそれについても賢明にしようとしていました。私は単純にonload関数内のコードの2行が必要です：

<body onload="onload();"> 
    //HTML CONTENT 
</body>

ホープ、このことができます誰か

出典

2012-02-23 12:48:21

あなたは上の2つのtouchstartのイベントを持っています同じ要素。したがって、同時に実行するのはinteractとhighlightです。それは意図的なのでしょうか？また、highlight(e)機能にeventを渡すこともありません。あなたはそれを渡す匿名関数でラップする必要があります。また

b.addEventListener('touchstart',function(e) { highlight(e); }, false);

、あなたのaddEventListener宣言にfalseを追加することを忘れないでください。

EDIT：同じ要素にtouchstartという2つのイベントリスナーを持つことは望ましくありません。 forEachステートメントとhighlight関数を変更する必要があります。

var b = document.getElementById('STOP'); 
var c = document.getElementById('START'); 
var array = [b, c]; 

array.forEach(function(element, index, array) { 
    element.addEventListener('touchstart', function(event){ highlight(event); }, false); 
}); 

function highLight(event) { 
    start = new Date(); // not sure what you're trying to accomplish here 
    event.preventDefault(); 
    event.currentTarget.setAttribute('class', 'active'); 
    if(start) { 
    alert("test") 
    } 
    start = null; 
}

出典

2012-02-21 16:24:51

ありません、それは私の意図でtouchstartを呼び出すべきではありません。

function onload() { /* PART 1 - sets touch even to button PART 2 - Defines what JavaScript function to run PART 3 - Indicates to set the touch event to false on first load */ document.getElementById('START').addEventListener('touchstart', startBTN, false); document.getElementById('STOP').addEventListener('touchstart', stop, false); }

は、機能のonloadコールに同じイベントを2度。私はこのすべてに非常に新しいですし、コーディングで少し失われています。私は単にクリックイベントを検出し、javascript関数を実行するので、単にtouchstartを検出したいと考えています。上記の例のように、単純なjavascriptアラートにすることができます。これは、私の上記のコードに無意味なコードがたくさんあることを意味しますか？これを指摘するのを手伝ってください。これは、2つの別々のボタンが同時に表示されている場合に機能します。 –

私は完全に理解しています。 JavaScriptは変な獣です。あなたの 'forEach'ループに特に興味を持ってみましょう。このループは1つの要素でのみ実行されているため、配列に「START」および「STOP」ボタンを追加し、その配列をループし、それぞれにイベントリスナーを追加することをお勧めします。私の答えを更新させてください。 –

これは、上記のコードを実装しただけですが、これはイベント関数（alert（ "test"）;）に到達することはありません。また、エラーが発生し、a）falseの後に追加する必要がありました;} –

タッチスタートイベントが当初隠しボタンで動作していません

答えて

関連する問題