Utiliser une condition sur un event.

Par Laznet, il y a 10 ans

Javascript

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 ?

11 réponses

betaWeb, il y a 10 ans

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() { /*...*/ };
Laznet, il y a 10 ans

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..

tleb, il y a 10 ans

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.

Laznet, il y a 10 ans

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 <p> </p> de la page etc...

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

tleb, il y a 10 ans

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

Laznet, il y a 10 ans

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

tleb, il y a 10 ans

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, il y a 10 ans

@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 ? :)

Laznet, il y a 10 ans

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 <p> </p> de la page html je dois utiliser ton code @betaWeb.
Ai-je enfin compris ?? ^^

betaWeb, il y a 10 ans

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

Laznet, il y a 10 ans

Merci a vous deux :D