Touchstart事件不在本來隱藏的按鈕上工作

-1

我正在創建一個Android應用程序並有2個按鈕。 1次開始和1次停止。一旦點擊了開始按鈕，就可以看到停止按鈕，然後停止按鈕變爲可見並開始不可見。Touchstart事件不在本來隱藏的按鈕上工作

我想在STOP按鈕上得到一個touchstart事件（可能會添加到開始按鈕，但不是必不可少的）。但是，出於某種原因，我的下面的代碼無法正常工作。請讓我知道我錯過了什麼。

背景： - 使用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函數內兩行代碼：

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-23 12:48:21

你有兩個touchstart事件的相同的元素。因此，它同時執行interact和highlight。那是故意的嗎？此外，您沒有將event傳入您的highlight(e)功能。你需要用它在傳遞給它的匿名函數：

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

另外，不要忘記添加false您addEventListener聲明。

編輯：我們不希望有兩個事件偵聽器touchstart到相同的元素。我們需要修改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同一個事件兩次。我對這一切都很陌生，在編碼方面有點失落。我只是想檢測touchstart，因爲我會點擊事件並運行JavaScript函數。以上例子可以是一個簡單的javascript警報。這是否意味着我的上面的代碼有很多不相關的代碼？你能幫我指出一點。如果我將它作爲兩個分開的按鈕同時可見，這將起作用。 – 2012-02-21 16:37:58

我完全理解。 JavaScript是一個善變的野獸。讓我們特別關注你的'forEach'循環。您只在一個元素上運行此循環，因此，我建議將「開始」和「停止」按鈕添加到數組中，循環遍歷該數組並向每個元素添加事件偵聽器。讓我更新我的答案。 – 2012-02-21 16:43:32

剛剛實現了上面的代碼，但是這似乎永遠不會通過事件函數（alert（「test」）;）。此外，我得到了一個錯誤，不得不在錯誤之後添加一個）;} – 2012-02-21 17:28:55

Touchstart事件不在本來隱藏的按鈕上工作

回答

相關問題