El evento TouchStart no funciona en el botón oculto originalmente

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

  •  28-10-2019
  •  | 
  •  

Pregunta

Estoy creando una aplicación Android y tengo 2 botones. 1 inicio y 1 parada. Para comenzar con el botón de parada, es visible una vez que se ha hecho clic en el botón de inicio, el botón de parada se vuelve visible e inicia invisible.

Estoy tratando de obtener un evento TouchStart en el botón Stop (también se acumularía para agregar al botón Inicio, pero no es como esencial). Sin embargo, por alguna razón, mi siguiente código no funciona correctamente. ¿Podrían algunos por favor avisarme lo que me he perdido?

Fondo: - Uso de jQuery para ocultar mis botones - los botones con imagen de fondo

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

Botón 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">
¿Fue útil?

Solución 2

He resuelto mi problema, estaba tratando de ser demasiado inteligente al respecto. Simplemente necesito 2 líneas de código dentro de la función de encendido:

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

Para llamar a la función en Onload:

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

Espero que esto ayude a alguien

Otros consejos

Tienes dos touchstart eventos en los mismos elementos. Por lo tanto, está actuando interact y highlight al mismo tiempo. ¿Eso es intencional? Además, no estás pasando event en tu highlight(e) función. Debe envolverlo en una función anónima que lo pasa:

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

Además, no olvides agregar false para usted addEventListener declaración.

EDITAR: No queremos tener dos oyentes de eventos para touchstart al mismo elemento. Necesitamos modificar el forEach declaración y el highlight función.

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;
}
Licenciado bajo: CC-BY-SA con atribución
No afiliado a StackOverflow
scroll top