Touchstart event not Working on originally hidden button

StackOverflow https://stackoverflow.com/questions/9380684

  •  28-10-2019
  •  | 
  •  

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">
Was it helpful?

Solution 2

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

OTHER TIPS

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;
}
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top