11521 sujets

JavaScript, DOM et API Web HTML5

Bonjour à tous

Dans ma poursuite de l'opération "passage de mes outils personnels à jQuery", je tombe sur le problème suivant.
J'ai une page qui contient une <div id="lecture">, laquelle contient une balise <audio id="lecteur">

Ce que je veux faire:
1) si l'utilisateur clique sur les boutons d'action de la balise audio, exécuter l'action correspondante et rien d'autre
2) s'il clique ailleurs dans la div "lecture", effectuer une action "action1"
3) s'il clique ailleurs dans la page, effectuer une autre action "action2"

Comme les évènements se propagent, "action1" est appelée dans les 2 premiers cas et "action2" est appelée dans les 3 cas.

J'ai l'impression qu'on doit pouvoir faire plus propre avec jQuery en arrêtant la propagation des évènements, mais je n'ai pas vu comment faire (en fait ça devrait même pouvoir se faire sans jQuery)

Quelqu'un peut il me donner la méthode à utiliser?
lddsoft a écrit :
Bonjour,

CECI répondrait-il à votre question ?

En tout cas ça y ressemble!
Merci, je vais regarder cela cet après-midi.
salut,
c'est en effet sans rapport avec JQuery. Il suffit de passer par l'objet "event" que l'on récupérera dans la fonction traitant l'évènement. On passe ensuite par un simple "event.stopPropagation()" ou "event.cancelBubble = true" pour le vieux IE.
Ouille, je cafouille!
J'en suis ici:

/* à document ready */
$(function () {
        $('audio').click = function (e) {
            e.stopPropagation();            /* si on fait marcher les boutons sur la balise audio */
        }
        $('#lecture').click = function (e) {
            e.stopPropagation();            /* si on clique dans la div qui contient cette balise */
        };
        $('body').click = function (e) {
            lire('');                       /* si on clique ailleurs. lire('') -> arrêter le lecteur */
        };
    });

En fait si on clique ailleurs il ne se produit rien.

Une idée sur l'origine du bug? (ou "de la bogue" si vous préferez Smiley cligne )

@Zelalsan c'est bien ce que je pensais, mais j'utilise assez peu les évènements, je ne me souvenais plus comment faire.
Un petit soucis de syntaxe jQuery ?

$('audio').click(function(e){
   e.stopPropagation();            /* si on fait marcher les boutons sur la balise audio */
});
Oken a écrit :
Un petit soucis de syntaxe jQuery ?

$('audio').click(function(e){
   e.stopPropagation();            /* si on fait marcher les boutons sur la balise audio */
});

Merci Oken, je ne suis pas toujours habitué à la syntaxe de jQuery.
Je me doutais bien que c'était quelque chose de ce genre.
PapyJP a écrit :

Merci Oken, je ne suis pas toujours habitué à la syntaxe de jQuery.


C'est la même que JavaScript... Smiley sweatdrop
tempif a écrit :


C'est la même que JavaScript... Smiley sweatdrop

Oui, mais définir une fonction par un appel de fonction au lieu d'une assignation, ce n'est pas vraiment la même chose.
Quand tu définis la méthode "trucmuche" d'un objet JS tu écris:

this.trucmuche = function() {...};

et pas

this.trucmuche(function() {...});

Il suffit de le savoir ... et de s'en souvenir!
A mon âge, on a du mal à mémoriser ce genre de détail.
Merci encore à tous pour votre assistance aux personnes âgées...
Ben si, les 2 exemples que tu donnes c'est du simple JS, rien à voir avec jQuery. Le 2 ème exemple c'est juste une fonction qui prend comme paramètre un callback.
tempif a écrit :
Ben si, les 2 exemples que tu donnes c'est du simple JS, rien à voir avec jQuery. Le 2 ème exemple c'est juste une fonction qui prend comme paramètre un callback.

C'est bien ce que je pense: j'ai développé des milliers de lignes de code en JS, et je démarre avec jQuery. Pas étonnant que je bafouille...
Tu veux que je te retrouve mes favoris pour apprendre le JS moderne ? (ils sont en anglais par contre).