web-dev-qa-db-fra.com

Meilleur moyen d'obtenir la cible initiale

Comment jQuery et/ou les meilleures pratiques permettent d’obtenir la cible initiale d’un événement dans jQuery (ou dans le javascript du navigateur en général). 

J'ai utilisé quelque chose comme ça

$('body').bind('click', function(e){
        //depending on the browser, either srcElement or 
        //originalTarget will be populated with the first
        //element that intercepted the click before it bubbled up
        var originalElement = e.srcElement;
        if(!originalElement){originalElement=e.originalTarget;}                         
});

ce qui fonctionne, mais je ne suis pas satisfait du reniflage d’entités à deux lignes. Y a-t-il un meilleur moyen?

javascriptjqueryeventsdomdelegates
27
Alan Storm

Vous pouvez le faire en une seule ligne avec var originalElement = e.srcElement || e.originalTarget; mais ce n’est pas vraiment JQuery-like ;-)

[Edit: Mais selon http://docs.jquery.com/Events/jQuery.Event#event.targetevent.target pourrait faire l'affaire ...]

36
eimaj

Je crois que e.target est ce dont vous avez besoin

$('body').bind('click', function(e){
                e.target // the original target
                e.target.id // the id of the original target                                               
});

Si vous allez sur le site jQuery in Action et téléchargez le code source, jetez un coup d’œil à 

  • Chapitre 4 - dom.2.propagation.html

qui traite de la propagation d'événements avec des gestionnaires de bulles et de capture

23
Russ Cam

L'utilisation de event.originalTarget peut provoquer "l'autorisation interdite d'accéder à la propriété 'XYZ' depuis un contexte non-chrome", je vous recommande donc d'utiliser les éléments suivants:

var target = event.target || event.srcElement || event.originalTarget;

event.target fonctionne sur Firefox, Opera, Google Chrome et Safari.

20
JussiR

En conjonction avec Comment détecter un clic en dehors d'un élément? voici comment vous pouvez piéger un sous-widget avec une fonctionnalité similaire de masquage lorsque vous cliquez sur l'extérieur pour empêcher votre propre pop-over de s'y cacher; dans ce cas, nous interceptons le widget contextuel Jquery UI Datepicker:

// not using jquery .one handler for this, so we can persist outside click later
$('html').click(function(evt) {
    // just return if element has the datepicker as a parent
    if ($(evt.target).parents('#ui-datepicker-div').length>0) return;

    //toggle shut our widget pop-over
    $('#mywidget').toggle();

    // now, unbind this event since our widget is closed:
    $(this).unbind(evt);
});
2
Joey T

en Javascript normal, var t = (e.originalTarget)? e.originalTarget: e.srcElement; devrait être suffisant pour le lire sur tous les navigateurs.

0
spbala