web-dev-qa-db-fra.com

Est-il possible d'ajouter un eventlistener sur une DIV?

Je connais cette fonction:

document.addEventListener('touchstart', function(event) {
    alert(event.touches.length);
}, false);

Mais est-il possible d'ajouter cela à une div? Exemple:

document.getElementById("div").addEventListener('touchstart', function(event) {
        alert(event.touches.length);
    }, false);

Je ne l'ai pas encore testé, peut-être que certains d'entre vous le savent? 

javascriptcsseventsjavascript-eventstouch
28
Roskvist

Oui, c'est comme ça que vous le faites.

document.getElementById("div").addEventListener("touchstart", touchHandler, false);
document.getElementById("div").addEventListener("touchmove", touchHandler, false);
document.getElementById("div").addEventListener("touchend", touchHandler, false);

function touchHandler(e) {
  if (e.type == "touchstart") {
    alert("You touched the screen!");
  } else if (e.type == "touchmove") {
    alert("You moved your finger!");
  } else if (e.type == "touchend" || e.type == "touchcancel") {
    alert("You removed your finger from the screen!");
  }
}

Ou avec jQuery

$(function(){
  $("#div").bind("touchstart", function (event) {
    alert(event.touches.length);
  });
});
40
iRyanBell

Inversement, si vous n'utilisez pas addEventListener, c'est probablement une alternative pour obtenir le contrôle de l'ID.

 $(document).ready(function () {
            $('#container1').on("contextmenu", function (e) {
                e.preventDefault();
            });
        });
0
KiranSolkar

Bien entendu, supposons que vous deviez insérer du texte dans h1 element lorsqu'un utilisateur clique sur le bouton. Il est assez facile de lier l'élément spécifique de HTML à addEventListener () method

<button id="button">Show me</button>


<h1 id="name"></h1>


document.getElementById("button").addEventListener("click", function(){
  document.getElementById("name").innerHTML = "Hello World!";
});
0
rawatDigamber