Désactiver onclick pour les autres scripts quand onclick est déclenché sur le mien

**cetteame** · 25/01/2015, 15h39

Bonjour,

J'essaie de créer une extension pour Google Chrome qui éxécute 2 fichiers JS (dont jQuery) sur n'importe quelle page web. Mais je pense que ma question concerne plus JavaScript d'une façon générale. Du coup, pour mieux illustrer mon problème, j'ai simulé l'effet de l'extension en chargeant en bas de page (juste avant </body>) les 2 scripts concernés :

http://mathiaspeguet.fr/test/index.php

Mon but est d'obtenir dans la console le chemin du DOM d'un élément lorsque je clique dessus, un peu comme le bouton loupe de l'inspecteur d'élément ou comme le bouton inspecter Nom : firebug.png
Affichages : 1694
Taille : 728 octets

Nom : firebug.png
Affichages : 1694
Taille : 728 octets

de firebug

Ça marche bien quand il n'y a pas d'autres JS qui intervient. On le voit quand on clique sur l'heure.

J'ai utilisé une instruction event.preventDefault(); pour pouvoir cliquer sur l'hyperlien "Réinitialiser" sans que ça recharge la page. Ça marche bien là aussi.

Par contre, ça ne marche pas sur l'hyperlien "Et Maintenant ?" parce qu'il est déclenché en JS.

Comment faire pour désactiver l'évènement onclick dans tous les autres scripts de n'importe quelle page sans que soit désactivé pour mon script ?

Pour info ou pour le confort de lecture :

content.js

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
console.log('content.js fonctionne bien.');
var chemin = ""
$( document ).ready(function() {
    $( 'body' ).click(function( event ) {
        var element = event.target;     // Élément cliqué
        var elbalise = "";              // Nom de la balise HTML
        while ( elbalise != "body" ) {  // Parcours des parents
            elbalise = element.localName;
            var elclass = ( element.className ) ? '.'+element.className: "" ;   //  Nom de la class
            var elid = ( element.id ) ? '#'+element.id : "" ;
            ( chemin ) ? chemin = elbalise+elclass+elid+' '+chemin : chemin = elbalise+elclass+elid;    // Nom de l'id
            element = element.parentElement;
        }
        console.log( "Clic sur : "+chemin );
        event.preventDefault();
    });
});

index.php

Code php :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<!doctype html>
<html lang="fr">
<head>
    <meta charset="utf-8">
    <title>test</title>
</head>
<body>
    <p>- Il est <?php
        echo date ('H:i:s');
        if ( $_GET['heure'] && is_string($_GET['heure']) ) {
    ?>, soit <?php
        echo time() - $_GET['heure'];
    ?> secondes de plus que tout à l’heure !
    <?php
        }
    ?></p>
    <p>- <a href="#" onClick="window.location.replace('index.php?heure=<?php
        echo time();
    ?>');return false;">Et Maintenant ?</a></p>
    <p>&nbsp;</p>
    <p><a href="index.php">Réinitialiser</a></p>
<!-- Simulation d’injection de Javascript depuis une extension Chrome -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="content.js"></script>
</body>
</html>

**danielhagnoul** · 27/01/2015, 22h52

Sans votre HTML, le code JS ci-dessous fonctionne très bien :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
$( document ).ready( function(){
 
    $( 'body' ).on( "click", function( event ){
        var element = event.target,
            chemin = "",
            elbalise,
            elclass,
            elid;
 
        while ( elbalise != "body" ){
            elbalise = element.localName;
            elclass = ( element.className ) ? ( '.' + element.className ) : ( "" );
            elid = ( element.id ) ? ( '#' + element.id ) : ( "" );
            chemin = elbalise + elclass + elid + ' ' + chemin;
            element = element.parentElement;
        }
 
        console.log( "Clic sur  : ", chemin );
 
        return false;
    });
 
});

**cetteame** · 29/01/2015, 18h11

Merci d'avoir répondu. Je commençais à m'inquiéter que mon sujet n'intéresse personne.

Merci d'avoir corrigé mon code pour cette version beaucoup plus propre.

Ça ne résout pas mon problème pour autant. Du coup, je propose une version plus simplifiée :

Comment faire en sorte qu'un clic sur le 3° élément "Un hyperlien JavaScript" n'ouvre pas une nouvelle page et se contente d'afficher le chemin du DOM comme c'est le cas quand on clique sur le 2° élément "Un hyperlien HTML" ?

La démo de ma question est sur : http://jsfiddle.net/5d0055m7/7/

Merci.

**prodev73** · 30/01/2015, 10h38

Salut,
le problème vient de

onClick="window.location.replace('http://jsfiddle.net/n5x3s6dm/3/show/');return false;"

tu force la redirection directement sur l'element window.
Tout marche comme tu veut si tu enlève cette ligne.

**danielhagnoul** · 30/01/2015, 10h57

C'est ce que je disais d'une autre manière :

Sans votre HTML, le code JS ci-dessous fonctionne très bien :

**cetteame** · 30/01/2015, 15h16

Oui, c'est en effet le problème que je veux résoudre. C'est justement le but de ma question.

Comme je l'indiquais dans mon introduction : je cherche à créer une extension pour Chrome qui va exécuter du JavaScript sur n'importe quel page sur internet. Je ne contrôle donc pas le HTML, mais seulement le JavaScript. Un hyperlien qui contient onClick="window.location.replace", ça fait parti des situations que j'ai besoin de prendre en charge.

Pour désactiver le comportement normal d'un hyperlien HTML, je place un event.preventDefault(); dans mon script jQuery.

Pour désactiver le comportement normal d'un hyperlien JavaScript, qu'est-ce que je peux faire ?

C'est faisable avec Firebug lite sur Chrome. Du coup, ça doit être faisable dans ma situation. J'ai essayé de regardé son code source : http://fbug.googlecode.com/svn/lite/...ug-lite-dev.js, mais je ne parviens pas à y trouver ma réponse.

**prodev73** · 30/01/2015, 16h17

Tu peut supprimer ou remplacer tout les comportements que tu veut en faisant un truc du genre :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
$("a").each(function(){
      $(this).attr("onclick","javascript:void();");
    });

Je sais pas si cette solution est acceptable pour toi.

**prodev73** · 30/01/2015, 16h19

ou meme plus general :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
$("[onclick]").each(function(){
      $(this).attr("onclick","javascript:void();");
    });

ce qui auras pour effet de desactiver tout les onclick de la page

**cetteame** · 30/01/2015, 16h32

Merci pour ta réponse.

J'avais en effet pensé à un truc comme ça. Mais le problème c'est qu'il peut y avoir pleins de façon de créer un lien en JavaScript. Ça peut être comme dans mon exemple en ajoutant un attribut onClick sur la balise HTML. Mais ça peut aussi être mis en place dans un script avec la méthode object.onclick=function(){myScript}; ou l'écouteur object.addEventListener("click", myScript); Ça peut aussi se baser sur un frameworks tel que le $(object).click(function(){}); de jQuery ou d'autres chez Mootools, Dojo ou Prototype, etc.

À ton avis, est-ce qu'il faut que je trouve une solution pour chaque situation individuelle au risque de ne pas parvenir à être exhaustif ? Ou, peut-il exister (je rêve de ça) une solution simple pour désactiver tout déclenchement d'évènement sur une balise ciblée ?

**prodev73** · 30/01/2015, 16h42

Je pense qu'un truc du genre

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

$("body").find("*").off();

devrait te supprimer tous les handlers sur toutes les balises.

**danielhagnoul** · 30/01/2015, 23h58

Envoyé par prodev73

Je pense qu'un truc du genre

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

$("body").find("*").off();

devrait te supprimer tous les handlers sur toutes les balises.

je cherche à créer une extension pour Chrome qui va exécuter du JavaScript sur n'importe quel page sur internet

Si pour exécuter votre code, vous devez désactiver tout ou partie du code JS de la page web, je crois que personne n'utilisera votre extension.

**Lorenzo77** · 31/01/2015, 01h23

cetteame : je sais que c'est pas ta question mais il existe déja un plugin pour inclure jquery avec FF ou chrome : jQuerify -> https://chrome.google.com/webstore/d...cpijhhldeeelkc

**cetteame** · 01/02/2015, 15h34

Envoyé par prodev73

Je pense qu'un truc du genre

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

$("body").find("*").off();

devrait te supprimer tous les handlers sur toutes les balises.

Seulement ceux de jQuery : http://jsfiddle.net/tr3dw3c9/1/

Dans tous les cas, le but n'est pas de supprimer les handlers, mais de les désactiver le temps de l'exécution du script.

Envoyé par Lorenzo77

cetteame : je sais que c'est pas ta question mais il existe déja un plugin pour inclure jquery avec FF ou chrome : [chrome webstore]

Heu... C'est tout à fait ça : ça n'est pas du tout ma question !

Je réponds un peu tardivement, mais, ça m'a permis de chercher de mon côté et de trouver une solution satisfaisante :

En examinant de plus prêt firebug, je me suis rendu compte que le chemin du DOM était plus intéressant à trouver au survol d'un élément plutôt qu'au clic.
Du coup, le clic restait intéressant, mais plustôt pour arrêter la fonction de survol
Pour désactiver l'évènement "click", ça devenait plus facile : il suffit de faire apparaitre un élément au premier plan. Le "mousedown" se fait sur l'élément du DOM visé, mais le "mouseup" se fait sur cet élément au 1° plan et du coup, l'évènement "click" n'est pas déclenché.
Cette solution ne résoud pas le problème d'hyperlien JavaScript qui se déclencherait sur "mousedown", mais comme cette évènement me semble bien moins souvent utilisé, j'espère que ça ne sera pas le cas sur les sites où mon extension travaillera

La solution en action : http://jsfiddle.net/5d0055m7/33/

Merci beaucoup à tous pour vos remarques et réflexion qui m'ont aider à faire avancer la mienne.

Désactiver onclick pour les autres scripts quand onclick est déclenché sur le mien

jQuery

Discussions similaires

Partager

Partager