L'événement tactile ne fonctionne pas sur le bouton à l'origine caché

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

  •  28-10-2019
  •  | 
  •  

Question

Je crée une application Android et j'ai 2 boutons. 1 Démarrage et 1 arrêt. Pour démarrer avec le bouton d'arrêt est visible une fois le bouton Démarrer cliqué, le bouton d'arrêt devient visible et le démarrage invisible.

J'essaie d'obtenir un événement TouchStart sur le bouton d'arrêt (je liberait également sur le bouton Démarrer mais pas comme essentiel). Cependant, pour une raison quelconque, mon code ci-dessous ne fonctionne pas correctement. Certains pourraient-ils me faire savoir ce que j'ai manqué.

Contexte: - Utilisation de jQuery pour cacher mes boutons - les boutons avec image d'arrière-plan

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

Bouton 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">
Était-ce utile?

La solution 2

J'ai résolu mon problème, j'essayais de devenir trop intelligent à ce sujet. J'ai simplement besoin de 2 lignes de code dans la fonction 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);
    }

Pour appeler la fonction Onload:

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

J'espère que cela aide quelqu'un

Autres conseils

Tu as deux touchstart événements sur les mêmes éléments. Par conséquent, ça se produit interact et highlight à la fois. Est-ce intentionnel? De plus, vous ne passez pas event Dans votre highlight(e) fonction. Vous devez l'envelopper dans une fonction anonyme qui la passe:

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

Aussi, n'oubliez pas d'ajouter false à ton addEventListener déclaration.

ÉDITER: Nous ne voulons pas avoir deux auditeurs d'événements pour touchstart au même élément. Nous devons modifier le forEach déclaration ainsi que le highlight fonction.

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;
}
Licencié sous: CC-BY-SA avec attribution
Non affilié à StackOverflow
scroll top