Forum : Utiliser une condition sur un event.

Bonsoir,

Dans mon code je demande de changer la largeur de ma div selon la position de la souris au moment ou je clique.
Sauf qu'apparemment les valeurs des coordonnées sont différente de celle interpréter par le css.
Quand je ne bouge presque pas ma souris l'élément disparait presque.

J'ai donc penser à un truc.
Dite moi si c'est possible de faire une condition sur un event, je m'explique.

Puis-je faire se genre de condition ?

if(onmousedown){
fonction...
}
else{
//Ne rien faire
}

Ca pourrait marcher ?

betaWeb

Réponse acceptée

Salut,

Oui, il suffit de binder un event sur un élément de façon classique :

document.querySelector('.mon_element').addEventListener('mousedown', function() { /*...*/ }, false);
/* OU */
document.querySelector('.mon_element').onmousedown = function() { /*...*/ };

tleb

Réponse acceptée

Perso, je trouve le MDN toujours très descriptif : ça permet d'utiliser un selecteur CSS dans son JS. Regarde les exemples qu'ils fournissent, tu comprendras pourquoi c'est cool.

tleb

Réponse acceptée

À noter, querySelector ne selectionne que le premier élement. Voir querySelectorAll (doc).

tleb

Réponse acceptée

Le premier élément dans l'élément selectionné. Si tu selectionnes le document, bien sûr que ça sera dans la page web (avec document.querySelector()).

betaWeb

Réponse acceptée

@Mika445 c'est l'équivalent du $('.mon_element') en jQuery, à ceci près que querySelector() ne sélectionne que le premier élément trouvé dans le DOM (comme l'a précisé @tleb. Si tu veux binder un event sur tous les éléments, il te faut faire ceci :

var elems = document.querySelectorAll('.mon_element');
Array.prototype.forEach.call(elems, function(elem) {
    elem.addEventListener('click', function() { /* ... */ }, false);
});

J'espère que c'est plus clair ? :)

betaWeb

Réponse acceptée

Oui, tu fais un document.querySelectorAll('p')

Laznet

Auteur

betaWeb - Merci pour ta réponse, pourrais-tu m'en dire plus sur ce qu'est le querySelector, j'ai regarder sur le net.. Mais je n'ai pas compris.

C'est un selecteur spécifique CSS..

Laznet

Auteur

Avec le query selector (si je ne me trompe pas) on est plus limité aux class, ID et name de getElementby... on peut selectionner des choses plus précise..
Tout les   de la page etc...

J'avoue tleb tu as raison ça a l'air pas mal :D

Laznet

Auteur

Le première élément inscrit, ou le première élément dans la page HTML.. (Le premier  par exemple).

Laznet

Auteur

Je suis encore débutant en JS,
Le DOM, c'est ce que j'appel la page HTML ?.. Ca n'a rien à voir ?

Par exemple si je veux affecter un event à tout les   de la page html je dois utiliser ton code @betaWeb.
Ai-je enfin compris ?? ^^

Laznet

Auteur

Merci a vous deux :D

Utiliser une condition sur un event.

11 réponses