-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">
4

2 に答える 2

0

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

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

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

編集：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-21T16:24:51.190 に答える
0

私は自分の問題を解決しました、私はそれについてあまりにも賢くしようとしていました。onload関数内に2行のコードが必要です。

    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を呼び出すには：

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

これが誰かに役立つことを願っています

于 2012-02-23T12:48:21.960 に答える