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 : 1856
Taille : 728 octets

Nom : firebug.png
Affichages : 1856
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.

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

jQuery

Vue hybride

Discussions similaires

Partager

Partager