Touchstart event not Working on originally hidden button

Question

I am creating an Android app and have 2 buttons. 1 start and 1 stop. To start with the stop button is visible once the start button has been clicked then the stop button becomes visible and start invisible.

I am trying to get a touchstart event on the STOP button (would liek to add to start button as well but not as essential). However, for some reason my below code is not working properly. Could some please let me know what i have missed out.

Background: - using jquery to hide my buttons - the buttons with background image

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 BUTTON:

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

Nick Beranek · Answer 1 · 2012-02-21T20:49:14.463

0

You have two touchstart events on the same elements. Therefore, it's performing interact and highlight at the same time. Is that intentional? Also, you're not passing event into your highlight(e) function. You need to wrap it in an anonymous function that passes it:

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

Also, don't forget to add false to your addEventListener declaration.

EDIT: We don't want to have two event listeners for touchstart to the same element. We need to modify the forEach statement as well as the highlight function.

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

edited Feb 21 '12 at 20:49

answered Feb 21 '12 at 16:24

Nick Beranek

2,721
1
19
14

No it is not my intention to be calling touchstart in the same event twice. I am very new to all this and a little lost with the coding. I simply want to detect the touchstart, as i would a click event and run a javascript function. Which as the example above can be a simple javascript alert. Does this mean my above code has a lot of irrelevent code? Could you please help me pin point this. This works if I have it as 2 seperate buttons which are both visible at the same time. – SingleWave Games Feb 21 '12 at 16:37
I totally understand. JavaScript is a fickle beast. Let's pay particular interest to your `forEach` loop. You're running this loop on only one element, therefore, I recommend adding the 'START' and 'STOP' buttons to an array, loop through that array and add event listeners to each. Let me update my answer. – Nick Beranek Feb 21 '12 at 16:43
Just implemented the above code, however this never seems to get through to the event function (alert("test");). Also, I got a error and had to add a ) after false);} – SingleWave Games Feb 21 '12 at 17:28
I forgot a `);` at the end of the `forEach` statement. – Nick Beranek Feb 21 '12 at 17:38
Another typo (maybe I should have thrown this into a jsFiddle). addEventListeners should be addEventListener. – Nick Beranek Feb 21 '12 at 20:49
It is still not working, however I have a feeling that it is clashing with the rest of my javaScript code? – SingleWave Games Feb 21 '12 at 22:33

score 0 · Accepted Answer · answered Feb 23 '12 at 12:48

I have solved my issue, I was trying to get too clever about it. I simply need 2 lines of code within the onload function:

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

To Call Function onload:

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

Hope this helps someone

Touchstart event not Working on originally hidden button

2 Answers2