JavaScript: Ajout d'un gestionnaire onClick sans écraser l'existant

Je suis en train de modifier tous les liens sur une page pour leur permettre d'effectuer un travail supplémentaire lorsqu'ils sont cliqués.

Trivial approche pourrait être quelque chose comme ceci:

function adaptLinks()
{
    var links = document.getElementsByTagName('a');
    for(i = 0; i != links.length; i++)
    {
        links[i].onclick = function (e)
        {
            <do some work>
            return true;
        }
    }
}

Mais certains liens ont déjà un onClick gestionnaire qui doit être préservé. J'ai essayé le suivant:

function adaptLinks()
{
    var links = document.getElementsByTagName('a');
    for(i = 0; i != links.length; i++)
    {
        var oldOnClick = links[i].onclick;
        links[i].onclick = function (e)
        {
            if(oldOnClick != null && !oldOnClick())
            {
                return false;
            }
            <do some work>
            return true;
        }
    }
}

Mais cela ne fonctionne pas parce que oldOnClick n'est évaluée que lorsque le gestionnaire est appelé (il contient la valeur de la dernier le lien sous ce point).

J'ai vu que beaucoup de tâches similaires autour d'ici sont résolus à l'aide de jQuery. Je suis actuellement à la recherche en elle, comme il semble à l'aise dans plusieurs autres tâches.

InformationsquelleAutor rluba | 2009-05-21

Vous avez besoin pour créer une fermeture de conserver l'original onclick valeur de chaque lien:

<a href="#" onclick="alert('hi');return false;">Hi</a>
<a href="#" onclick="alert('there');return true;">There</a>
<script type="text/javascript">
function adaptLinks() {
    var links = document.getElementsByTagName('a');
    for (i = 0; i != links.length; i++) {
        links[i].onclick = (function () {
            var origOnClick = links[i].onclick;
            return function (e) {
                if (origOnClick != null && !origOnClick()) {
                    return false;
                }
                //do new onclick handling only if
                //original onclick returns true
                alert('some work');
                return true;
            }
        })();
    }
}
adaptLinks();
</script>

Noter que cette mise en œuvre n'effectue de la nouvelle onclick manipulation si l'original onclick gestionnaire renvoie la valeur true. C'est bien si c'est ce que vous voulez, mais gardez à l'esprit que vous aurez à modifier le code légèrement si vous souhaitez effectuer la nouvelle onclick de la manipulation, même si le gestionnaire d'origine renvoie la valeur false.

Plus sur les fermetures à la comp.lang.FAQ javascript et de Douglas Crockford.

+1 pour l'astuce sur les fermetures. Mon exemple a été spécifiquement conçu pour s'exécuter que si le gestionnaire d'origine n'a pas d'annuler, de sorte que votre exemple s'intègre bien.

InformationsquelleAutor Grant Wagner

20

À ne pas attribuer à un gestionnaire d'événement directement: utilisation de l'souscrire modèle addEventListener /attachEvent à la place (qui ont également supprimer des paires!).

Bonne introduction ici.
- Ou, vous pouvez utiliser une librairie javascript (/me vote pour jQuery) qui vous permettrait de faire la même chose avec beaucoup plus de facilité. Mais vous devez toujours passer par la théorie, à la quirksmode page. Il est tout à fait l'âme d'enrichissement pour un développeur javascript.
- La "facilité" est relative. Je peux enrouler ce genre de choses dans un 5 méthode de la ligne OU je peux télécharger un multi-K de la bibliothèque. Une bibliothèque est bon d'avoir, mais pas au détriment de savoir comment réellement faire quelque chose de vous-même. Je ne serais pas anti-vote jquery, je ne suis pas vif sur l'automatique.
- Je suis d'accord que vous ne devriez pas utiliser une bibliothèque énorme juste pour gagner 10 minutes de codage / apprentissage. Mais jQuery semble aider avec certains de mes autres tâches en tant que bien, donc je suis actuellement à la recherche en elle.
- Ainsi, vous devriez. Je vous recommande fortement d'un développeur de l'apprentissage des bibliothèques, j'ai juste vu trop de gars qui pourraient utiliser jquery mais pas de JS.
- Une autre raison pour laquelle j'ai commencé à utiliser JQuery est le problème avec "ce" références lors de l'utilisation de Microsoft modèle (tel que décrit sur Quirksmode). J'ai besoin d'une bonne "ce" de référence et ne plus perdre mon temps à coder autour de cette question si d'autres personnes ont déjà résolu (par exemple en JQuery)
- Viens de remarquer le commentaire précédent - jquery ne résout pas vos problèmes avec this et c'est vraiment rien à voir avec MS, et c'est exactement pourquoi j'ai un problème avec la fonction "utiliser jquery" réponse, parce que les gens ne comprennent pas vraiment ce qu'il se passe.
InformationsquelleAutor annakata
4

Utiliser un wrapper autour de la méthode addEventListener (DOM soutenir les navigateurs) ou attachEvent (IE).

Noter que si jamais vous voulez stocker une valeur dans une variable sans écraser l'ancienne valeur, vous pouvez utiliser fermetures.
```
function chain(oldFunc, newFunc) {
  if (oldFunc) {
    return function() {
      oldFunc.call(this, arguments);
      newFunc.call(this, arguments);
    }
  } else {
    return newFunc;
  }
}

obj.method = chain(obj.method, newMethod);
```
Dans La Programmation Orientée Aspects, ce qui est connu comme "conseils".

InformationsquelleAutor outis

comment sur la définition de oldClick = links[i].onclick or an empty function. Comme

var oldOnClick = links[i].onclick || function() { return true; };

links[i].onclick = function (e)
   {
       if (!oldOnClick())
           return false;
       //<do some work>
       return true;
   }

Ou vous pouvez utiliser attachEvent et addEventListener comme d'autres l'ont recommandé

function addEvent(obj, type, fn) {
        if (obj.addEventListener)
                obj.addEventListener(type, fn, false);
        else if (obj.attachEvent)
                obj.attachEvent('on' + type, function() { return fn.apply(obj, [window.event]);});
}

et de l'utiliser comme

addEvent(links[i], 'click', [your function here]);

Ça ne résout pas le problème que oldOnClick est évaluée lorsque le gestionnaire est appelé et pas quand c'est écrit. Plus: Il ne parvient pas à retourner false si le vieux onclick gestionnaire retourne false (pour arrêter le lien de travail).
Ah, je comprends mieux le problème. Vous ne pourriez pas vous retourner false si oldOnClick renvoie false?

InformationsquelleAutor Russ Cam

0

À l'aide de JQuery, le code suivant fonctionne:
```
function adaptLinks(table, sortableTable)
{
    $('a[href]').click(function (e)
    {
        if(!e.isDefaultPrevented())
        {
            <do some work>
        }
    });
}
```
Cela nécessite l'utilisation d'une bibliothèque, mais évite certains problèmes qui existent avec la méthode addEventListener/attachEvent (comme le dernier problème avec ceci références).

Il y a juste un inconvénient: si l'original onClick gestionnaire est affectée à l'aide "normal" de JavaScript, la ligne
```
...
if(!e.isDefaultPrevented())
...
```
toujours résoudre à vrai, même dans le cas où le gestionnaire d'origine annulé l'événement, en retournant false. Pour résoudre ce problème, le gestionnaire d'origine a utiliser JQuery ainsi.

InformationsquelleAutor rluba

Cette fonction devrait être utilisable (écouteurs d'événement approche):

function addEventListener(element, eventType, eventHandler, useCapture) {
    if (element.addEventListener) {
        element.addEventListener(eventType, eventHandler, useCapture);
        return true;
    } else if (element.attachEvent) {
        return element.attachEvent('on' + eventType, eventHandler);
    }
    element['on' + eventType] = eventHandler;
}

ou vous pouvez enregistrer un peu plus de code de l'ajout de cette fonction (si vous avez besoin d'ajouter le même écouteur d'événement à de nombreux éléments):

function addClickListener(element) {
    addEventListener(element, 'click', clickHandler, false);
}

InformationsquelleAutor Zelid

0

J'ai eu des problèmes avec la surcharge de la manière la plus simple - cette page a été une grande ressource
http://www.quirksmode.org/js/events_advanced.html

InformationsquelleAutor Julian Kuiters

Vous devez vous connecter pour publier un commentaire.