Vanilla JS. Essayer d'exécuter une fonction en cliquant sur un élément si la balise body a une classe de example. Pas de jQuery solutions s'il vous plaît, je viens de jQuery et je veux apprendre et comprendre cette tâche simple dans JavaScript.

Plus encore, si vous voulez me le faire savoir, où est l'erreur dans ma pensée, s'il vous plaît? Dois-je encapsuler l'événement onclick dans la condition de la classe body? J'ai essayé mais je n'ai pas non plus reçu l'alerte.

    var imgContainer = document.querySelector('.img-container');

    var bodyTag = document.getElementsByTagName('body');

    var bodyClassName = bodyTag.classname;

    imgContainer.onclick = infoBox;

    function infoBox(event) {

      if (bodyTag.classList.contains("example")) {

        alert('img-container has been clicked');

      }
    }
<body class="example">
  <div class="img-container">
    <img src="https://dummyimage.com/320x120/000/fff" alt="dummy image">
    <div class="img-infobox">
      <p>This is a dummy image from https://dummyimage.com/</p>
    </div>
  </div>
</body>

Modifier
D'après les réponses données, je pense qu'au lieu de renvoyer un tableau comme un objet et d'interroger le DOM, il serait plus rapide de simplement document.body. non?

Et cela signifie alors que cette question n'a pas vraiment à voir avec

Que renvoient querySelectorAll, getElementsByClassName et les autres méthodes getElementsBy *?

Puisque la réponse fournie par le commentaire de https://stackoverflow.com/users/949476/dfsq n'utilise aucune des méthodes à partir de la réponse liée.

Aussi
Comment puis-je comparer la vitesse d'utilisation de document.querySelector vs document.getElementsByTagName('body')[0]; vs document.body s'il vous plaît?

Comme pour expliquer pourquoi j'ai accepté quelle réponse pour être juste car toutes les réponses fournissent une solution de travail.

Réponse
Puisque toutes les réponses fonctionnent et que document.body est le plus rapide, mais aussi pour une autre raison que j'aime poster ma réponse ici.

J'utilise ce script de "4 nouvelles façons de gérer les collants : effets de survol sur les appareils mobiles " pour gérer le problème de survol permanent. Avec cela, une classe est ajoutée à la balise html du site.

Au début, j'avais la fonction de clic à l'intérieur de la condition pour vérifier le corps ou la classe html et ne déclencher les fonctions de clic qu'une fois la classe remplie, mais avec l'utilisation de ce script, je devais d'abord exécuter la fonction et une fois seulement le html / body a la classe voulue.

Donc pendant…

  if (bodyTag.classList.contains("example")) {

    imgContainer.onclick = infoBox;

    function infoBox(event) {
        alert('img-container has been clicked and body has class "example"');    
    }

Aussi bien que

var bodyClassName = bodyTag.classname;

imgContainer.onclick = infoBox;

function infoBox(event) {

  if (bodyTag.classList.contains("example")) {

    alert('img-container has been clicked');

  }
}

Fonctionne dans un pur JSFiddle, cela ne fonctionnera pas avec ce paramètre car le script de survol collant définit la classe souhaitée sur l'élément une fois que vous avez touché.

Donc, une fois qu'un clic est fait (je suppose), il est déjà trop tard pour vérifier une condition en dehors de cet événement tactile / tap / clic et donc il ne se déclenchera pas.

En fin de compte, cela conduit à ces lignes simples qui fonctionnent bien avec le script de survol collant. L'événement de clic doit s'exécuter en premier, puis vérifier la classe / condition souhaitée.

var imgContainer = document.querySelector('.img-container');

imgContainer.onclick = infoBox;

function infoBox(){

    if (document.documentElement.classList.contains('can-touch')) {
        alert('click on touch');
    }
}
1
lowtechsun 15 janv. 2017 à 18:24

2 réponses

Meilleure réponse

Le sélecteur utilisé pour sélectionner l'élément du corps n'est pas approprié.

GetElementsByTagName donnera un tableau semblable à un objet, vous devrez donc utiliser index pour obtenir le premier élément.

Lisez: https://developer.mozilla.org/en- US / docs / Web / API / Element / getElementsByTagName

Vous utilisez déjà querySelector qui renvoie le premier élément correspondant, faites de même pour le corps.

Lisez: https://developer.mozilla.org/en- US / docs / Web / API / Document / querySelector

var imgContainer = document.querySelector('.img-container');

var bodyTag = document.querySelector('body');

var bodyClassName = bodyTag.classname;

imgContainer.onclick = infoBox;

function infoBox(event) {

  if (bodyTag.classList.contains("example")) {
  
    alert('img-container has been clicked and body has class "example"');
    
  }
}
<body class="example">

  <div class="img-container">
    <img src="https://dummyimage.com/320x120/000/fff" alt="dummy image">
    <div class="img-infobox">
      <p>This is a dummy image from https://dummyimage.com/</p>
    </div>
  </div>

</body>

Comparaison des performances: https://jsperf.com/body-selector-comparision

2
Deep 15 janv. 2017 à 15:53

Le document.getElementsByTagName renvoie un HTMLCollection qui est accessible sous forme de tableau d'objets, il vous suffit de sélectionner le premier en utilisant [0] après comme dans l'exemple suivant:

var imgContainer = document.querySelector('.img-container');

    var bodyTag = document.getElementsByTagName('body')[0];

    var bodyClassName = bodyTag.classname;

    imgContainer.onclick = infoBox;

    function infoBox(event) {

      if (bodyTag.classList.contains("example")) {

        alert('img-container has been clicked');

      }
    }
<body class="example">
  <div class="img-container">
    <img src="https://dummyimage.com/320x120/000/fff" alt="dummy image">
    <div class="img-infobox">
      <p>This is a dummy image from https://dummyimage.com/</p>
    </div>
  </div>
</body>
1
Tha'er M. Al-Ajlouni 15 janv. 2017 à 15:39