[JavaScript] [jQuery] Construction et exemples d'utilisation de l'événement spécial clickOutside

danielhagnoul · 09/12/2012, 23h33

Construction et exemples d'utilisation de l'événement spécial clickOutside

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
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
<!DOCTYPE html>
<html lang="fr">
	<head>
		<meta charset="utf-8" />
		<meta name="author" content="Daniel Hagnoul">
		<title>Forum jQuery</title>
		<link href='http://fonts.googleapis.com/css?family=Sofia|Ubuntu:400|Kreon'>
		<link rel="stylesheet" href="http://danielhagnoul.developpez.com/styles/dvjhRemBase.css">
		<style>
			.hyphens { -moz-hyphens:auto; -webkit-hyphens:auto; -ms-hyphens:auto; hyphens:auto; }
			article { display:table-cell; text-align:justify; border:0.1rem dotted grey; }
			.table1, .table2 { border-collapse:separate; border-spacing:3rem; }
			.ligne { display:table-row; }
 
			.table1 .ligne { height:25rem; }
			.table1 article { width:40rem; vertical-align:top; }
 
			/* TEST */
			#example { margin: 1.2rem; padding: 0.6rem; width: 10rem; height: 10rem; border:0.1rem dotted red; }
			#example span { color: blue; }
		</style>
	</head>
	<body>
		<h1>Forum jQuery</h1>
		<h2>Titre 2</h2>
		<section class="conteneur">
			<section class="table1">
				<section>
					<article>
 
						<div class="test" id="example">Le texte de la <span>division</span> incluse dans l'article.</div>
 
					</article>
					<article class="test">
 
						<p>Un texte de contrôle.</p>
 
					</article>
				</section>
			</section>
		</section>
		<footer itemscope itemtype="http://danielhagnoul.developpez.com/">
			<time datetime="2012-12-09T20:25:46.702+01:00" pubdate>2012-12-09T20:25:46.702+01:00</time>
			<span itemprop="name">Daniel Hagnoul</span>
			<a href="http://www.developpez.net/forums/u285162/danielhagnoul/" itemprop="url">@danielhagnoul</a>
			<a href="http://danielhagnoul.developpez.com/" itemprop="url">Mon cahier d’exercices</a>
			<a href="http://javascript.developpez.com/faq/jquery/" itemprop="url">FAQ</a>
			<a href="http://javascript.developpez.com/cours/?page=frameworks#jquery" itemprop="url">Tutoriels</a>
		</footer>
		<script src="http://danielhagnoul.developpez.com/lib/raphael-min.js"></script>
		<script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
		<script src="http://code.jquery.com/color/jquery.color-2.1.1.min.js"></script>
		<script src="http://danielhagnoul.developpez.com/lib/dvjh/base.js"></script>
		<script>
			"use strict";
 
			/*
			 * Cliquez à l'extérieur !
			 * Special event clickOutside
			 * 
			 * Daniel Hagnoul
			 * Code v1.0.0 2012-12-09
			 * 
			 * L'événement requiert la transmission de l'attribut 
			 * identity dans l'argument data du gestionnaire
			 * d'événement.
			 * 
			 * L'attribut identity doit contenir un sélecteur 
			 * jQuery valide correspondant à un ou des éléments 
			 * du DOM.
			 * 
			 * Exemple : "article", ".test1" ou "#example".
			 * 
			 * L'événement ne se déclenche pas si
			 * le clic se produit dans un élément du DOM qui 
			 * possède ce sélecteur ou si l'un de ses ascendants
			 * possèdent ce sélecteur.
			 * 
			 * Pour un sélecteur non spécifique, comme une 
			 * classe ou un tag, cela peut être vu comme un 
			 * inconvénient, mais c'est aussi un comportement 
			 * souhaitable dans de nombreux cas.
			 * 
			 * Usage, exemple : $( document ).on( "clickOutside", 
			 * { "identity" : "#monID" }, function( event ){...});
			 */
			( function( $ ){
 
				var clickOutsideHandler = function( event ){
	    				var identity = event.data.identity || "";
 
	    				if ( $( event.target ).closest( identity )[ 0 ] === undefined ){
	    					event.type = "clickOutside";
	    					$.event.handle.apply( this, arguments );
	    				}
					};
 
	   			$.event.special.clickOutside = {
					setup : function( data, namespaces ){
						jQuery( this ).on( "click", data, clickOutsideHandler );
					},
					teardown : function( namespaces ){
						jQuery( this ).off( "click", clickOutsideHandler );
					}
	    		};
 
			})( jQuery );
 
			$(function(){
 
				/*
				 * Selon l'endroit où l'on clique, un à trois effets
				 * peuvent se produiront.
				 */
 
				/*
				 * Cas : $( "section.conteneur" ) et { "identity" : "div" }.
				 * 
				 * Comme il n'y a qu'une division dans le code de test, un clic
				 * dans le sélecteur, mais à l'extérieur de la division agit sur 
				 * la division.
				 */
				$( "section.conteneur" ).on( "clickOutside", { "identity" : "div" }, function( event ){
					$( event.data.identity ).css( "background-color", "lightgrey" );
				});
 
				/*
				 * Cas : $( document ) et { "identity" : ".test" }.
				 * 
				 * Comme il y a deux éléments du DOM qui ont cette classe
				 * dans le code de test (la division et un tag article), seul 
				 * un clic dans le sélecteur, mais à l'extérieur de ces 
				 * éléments, agit sur la couleur du texte contenu dans ces 
				 * éléments.
				 */
				$( document ).on( "clickOutside", { "identity" : ".test" }, function( event ){
					$( event.data.identity ).css( "color", "green" );
				});
 
				/*
				 * Cas : $( "body" ) et { "identity" : "#example" }.
				 * 
				 * Rappel : un ID doit être unique dans la page web.
				 * 
				 * Un clic dans le sélecteur, mais à l'extérieur de la 
				 * division ayant cet ID, agit sur la division.
				 */
				$( "body" ).on( "clickOutside", { "identity" : "#example" }, function( event ){
					$( event.data.identity ).css({ "width" : "20rem", "height" : "20rem" });
				});
 
			});
		</script>
	</body>
</html>

SylvainPV · 10/12/2012, 11h30

Ah c'est donc comme ça qu'on étend les Events jQuery. J'avais cherché mais n'avait point trouvé, merci pour le code.
Sinon puis-je suggérer d'appeler l'évènement clickout pour rester en cohérence avec l'évènement mouseout ?
Aussi concernant l'ordre des arguments, c'est un peu particulier :

Code :

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

1
2
3
4
5
6
7
8
9
 
/*
 * Cas : $( "section.conteneur" ) et { "identity" : "div" }.
* 
* Comme il n'y a qu'une division dans le code de test, un clic
 dans le sélecteur, mais à l'extérieur de la division agit sur 
* la division.
*/
$( "section.conteneur" ).on( "clickOutside", { "identity" : "div" }

Ecrit comme ça, on pourrait croire que l'évènement survient lorsque l'on clique en dehors de section.conteneur. Je crois qu'il vaudrait mieux passer identity en sélecteur et définir le cadre en argument :

Code :

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

1
2
 
$( "#monDiv" ).on( "clickout", "section.conteneur", function(event){ ... });

avec comme valeur par défaut document si le conteneur n'est pas indiqué.

Inversement, on pourrait écrire :

Code :

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

1
2
 
$( "section.conteneur" ).on( "click", ":not(#monDiv)", function(event){ ... });

mais cela ne fonctionne pas si l'on clique sur un enfant de #monDiv.

Donc ça se discute...
Dans la mesure où le développeur veut identifier un clic en dehors d'un élément déterminé, ça me paraît plus logique de passer cet élément en premier. De plus, le cadre délimitant est facultatif, et pas l'élément exclus.

danielhagnoul · 10/12/2012, 22h44

Le choix du nom appartient à l'auteur. J'ai choisi "Cliquez à l'extérieur" qui se traduit par clickOutside.

Je crois qu'un non-débutant en jQuery comprendra mes exemples d'utilisation et mes explications.

Plutôt qu'une critique négative stérile, tu devrais écrire la version qui te convient et la posté à la suite et alors nous dire pourquoi tu penses qu'elle est supérieure à la proposition précédente.

SylvainPV · 11/12/2012, 01h40

Une critique négative stérile ?

Permets-moi de repasser en revue mon post:

Citation:

Ah c'est donc comme ça qu'on étend les Events jQuery. J'avais cherché mais n'avait point trouvé, merci pour le code.

Traduction: j'ai appris quelque-chose grâce à toi, je témoigne de ma reconnaissance. Déjà tu devrais être flatté au lieu de m'envoyer ballader

Citation:

Sinon puis-je suggérer d'appeler l'évènement clickout

Ceci n'est pas une critique mais une suggestion, formulée de manière tout à fait aimable

Citation:

pour rester en cohérence avec l'évènement mouseout ?

et argumentée de manière tout à fait valable il me semble

Citation:

Aussi concernant l'ordre des arguments, c'est un peu particulier :
Ecrit comme ça, on pourrait croire que l'évènement survient lorsque l'on clique en dehors de section.conteneur. Je crois qu'il vaudrait mieux passer identity en sélecteur et définir le cadre en argument (...) avec comme valeur par défaut document si le conteneur n'est pas indiqué.

Seconde suggestion, également argumentée, le clickOutside ne fait pas référence au sélecteur et peut donc être déroutant comparé aux autres évènements jQuery: $(objet).on("click") par rapport à $(cadre).on("clickOutside", {identity: objet})

Citation:

Inversement, on pourrait écrire :
$( "section.conteneur" ).on( "click", ":not(#monDiv)", function(event){ ... });
mais cela ne fonctionne pas si l'on clique sur un enfant de #monDiv.

Là je me remets en question (et je repenche en ta faveur, dans l'ordre des arguments que tu as choisi !) en disant que cet ordre se rapproche plus de la logique initiale qu'aurait un dev jQuery voulant cette fonctionnalité, celle d'identifier la zone du clic puis d'exclure un event.target en paramètre à la manière du nouveau .live() en .on()

Citation:

Donc ça se discute...

Appel au dialogue ! Visiblement avec toi faut pas compter là dessus...

Citation:

Dans la mesure où le développeur veut identifier un clic en dehors d'un élément déterminé, ça me paraît plus logique de passer cet élément en premier. De plus, le cadre délimitant est facultatif, et pas l'élément exclus

Deux nouveaux arguments viennent appuyer ma suggestion, et me convainquent à te la formuler ici-même, pour le meilleur et pour le pire

Donc il va falloir m'expliquer en quoi tout ceci est négatif et stérile. Je pense que tu devais être sacrément en pétard pour m'avoir répondu ça, j'espère sincérement qu'après une nuit de sommeil ou une douche froide tu sauras rejuger ça de manière plus posée.

Maintenant, face à tes objections :

Citation:

Le choix du nom appartient à l'auteur. J'ai choisi "Cliquez à l'extérieur" qui se traduit par clickOutside.

Okay très bien, mais là on parle d'une dizaine de lignes de code pour une fonctionnalité trouvable en une centaines de versions différentes sur le net. Pas de quoi vraiment déposer un brevet ! Surtout que ça vient à l'origine d'un topic où Bovino et moi avons posté le même code à quelques différences près ! D'ailleurs, c'est moi qui ai suggéré d'en faire un plug-in jQuery :
http://www.developpez.net/forums/d12...v/#post7016660
Donc le droit au baptême ça va cinq minutes... Si je te suggère de le renommer en clickout, c'est pas pour flatter mon égo mais pour des raisons bien valables :
1) les évènements jQuery sont par convention intégralement en minuscules
2) l'évènement standard le plus proche de celui-ci est mouseout, et pour des soucis de consistance dans le nommage il vaudrait mieux s'en inspirer. C'est pour la même raison qu'on a mousedown en parallèle à l'évènement keydown.

Citation:

Je crois qu'un non-débutant en jQuery comprendra mes exemples d'utilisation et mes explications.

Tant qu'à faire, si un débutant pouvait comprendre aussi, ça serait utile sur ce forum

Enfin ça confirme ce que je pensais, que tu as répondu ça en étant fatigué et sans avoir les idées claires

Citation:

tu devrais écrire la version qui te convient et la posté à la suite et alors nous dire pourquoi tu penses qu'elle est supérieure à la proposition précédente.

Tu as déjà vu ma version dans le topic pré-cité et je pense avoir expliqué suffisamment en longueur pourquoi je pense que mes suggestions peuvent l'améliorer.

danielhagnoul · 11/12/2012, 12h16

Incompréhension mutuelle totale !

Vous me prêtez des sentiments et des intentions que je n'éprouve pas.

Pour moi, en programmation, les critiques sont stériles lorsqu'elles ne sont pas appuyées par un code meilleur que celui qui est critiqué.

Si vous aviez pris le temps de "jouer" avec mon code (vous reconnaissez que ce type de code est nouveau pour vous) et essayez d'appliquer vos idées, je suis persuadé que vous n'auriez pas émis les mêmes commentaires.

En ce qui me concerne, sauf apport d'un meilleur code que le mien, le sujet est clos.

SylvainPV · 11/12/2012, 18h28

Citation:

Envoyé par danielhagnoul

Pour moi, en programmation, les critiques sont stériles lorsqu'elles ne sont pas appuyées par un code meilleur que celui qui est critiqué.

Cela confirme mes craintes. J'espère que tu ne fais pas preuve du même zèle lorsque tu travailles en équipe ou échange avec un client...

Pour moi, les idées valent mieux que les actes et avant de foncer tête baissée dans le code, je prends le temps de réfléchir à ce que je veux obtenir au final. C'est pourquoi mes suggestions ne concernaient pas ton code mais le plug-in obtenu au final. Si son utilisation s'avère peu intuitive voire déroutante, alors peu importe qu'il soit codé à merveille, il ne sera pas adopté.

Lorsque je t'ai fait part de mes suggestions, je me suis placé en tant qu'utilisateur et non développeur. Puisqu'il s'agit là d'une contribution à destination de tous, je pense que tu devrais être un peu plus à l'écoute (et aimable, ça ne fait pas de mal non plus)

Mais bon s'il n'y a que le code que tu daignes lire, voilà ce à quoi je suis arrivé:

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
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
 
(function($){
  var excluded = $([]);   
 
  $.event.special.clickout = {  
    setup: function(data){
      if(excluded.size()===0){
        $(document).on("click", $.event.special.clickout.handler);
      }
      $(this).data('outlimit', data && data.outlimit ? data.outlimit : document.body);        
      excluded = excluded.add(this);
    },
    teardown: function(data){
      $(this).removeData('outlimit');
      excluded = excluded.not(this);
      if(excluded.size()===0){
         $(document).off("click", $.event.special.clickout.handler);
      }
    },    
    add: function(handleObj){
      var old_handler = handleObj.handler;
      handleObj.handler = function(event,elm){
        event.target = elm; //redirect event
        old_handler.apply(this, arguments);
      };
    },
    handler: function(event){
      excluded.each(function(e,elm){
        var out = $(elm).data('outlimit') || document.body;
        if($(event.target).closest(elm).size() === 0 &&
           $(event.target).closest(out).size() !==0 ){
          //triggerHandler: stop event bubbling
          //extra parameters: click event target
          $(elm).triggerHandler( 'clickout', [ event.target ] );
        }
      });
    }      
  };
})(jQuery);

Démo : http://jsfiddle.net/wE529/

Ce n'est certainement pas le "meilleur code", sûrement buggé et optimisable, mais ça aura le mérite de prouver qu'inverser les arguments est possible et que ça mérite de s'y intéresser...

danielhagnoul · 11/12/2012, 23h25

Citation:

C'est pourquoi mes suggestions ne concernaient pas ton code mais le plug-in obtenu au final. Si son utilisation s'avère peu intuitive voire déroutante, alors peu importe qu'il soit codé à merveille, il ne sera pas adopté.

Lorsque je t'ai fait part de mes suggestions, je me suis placé en tant qu'utilisateur et non développeur. Puisqu'il s'agit là d'une contribution à destination de tous, je pense que tu devrais être un peu plus à l'écoute (et aimable, ça ne fait pas de mal non plus)

On peut exposer la même idée sous la forme d'une question, d'une suggestion ou d'une critique. Je fais la différence entre les trois et je suis effectivement assez sensible à la forme, au ton et aux nuances d'un message.

Ce que vous appeler maintenant "vos suggestions" n'en était pas. L'amabilité, le fond, la forme et le ton n'y étaient pas non plus.

Le code proposé ne reprend pas votre idée d'utiliser la forme dynamique du gestionnaire d'événement on() avec inversion des sélecteurs par rapport à l'action.

Votre idée :

Code :

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

1
2
$( "#monDiv" ).on( "clickout", "section.conteneur", function(event){ ... });
$( "section.conteneur" ).on( "click", ":not(#monDiv)", function(event){ ... });

Votre code :

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
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
(function($){
  var excluded = $([]);   
 
  $.event.special.clickout = {  
    setup: function(data){
      if(excluded.size()===0){
        $(document).on("click", $.event.special.clickout.handler);
      }
      $(this).data('outlimit', data && data.outlimit ? data.outlimit : document.body);        
      excluded = excluded.add(this);
    },
    teardown: function(data){
      $(this).removeData('outlimit');
      excluded = excluded.not(this);
      if(excluded.size()===0){
         $(document).off("click", $.event.special.clickout.handler);
      }
    },    
    add: function(handleObj){
      var old_handler = handleObj.handler;
      handleObj.handler = function(event,elm){
        event.target = elm; //redirect event
        old_handler.apply(this, arguments);
      };
    },
    handler: function(event){
      excluded.each(function(e,elm){
        var out = $(elm).data('outlimit') || document.body;
        if($(event.target).closest(elm).size() === 0 &&
           $(event.target).closest(out).size() !==0 ){
          //triggerHandler: stop event bubbling
          //extra parameters: click event target
          $(elm).triggerHandler( 'clickout', [ event.target ] );
        }
      });
    }      
  };
})(jQuery);
 
 
$(".exclus").on("clickout", {outlimit:"#container"}, function(event){
    console.dir(event);
    $(this).fadeOut(200).fadeIn(200);
});
 
$("#container").on("clickout", function(event){
    console.dir(event);
    $(this).fadeOut(200).fadeIn(200);
});

La structure de votre code me fait penser à celui de l'événement spécial clickOutside de Ben Alman.

Comme lui, vous déclenchez l'événement "click" dans les méthodes setup() et teardown() sur le sélecteur "document". Ce qui fait que votre second exemple de l'utilisation de votre événement spécial est identique au sien :

Code :

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

1
2
3
4
// Hide a modal dialog when someone clicks outside of it.
$("#modal").bind( "clickoutside", function(){
    $(this).hide();
});

SylvainPV · 12/12/2012, 10h17

Citation:

Ce que vous appeler maintenant "vos suggestions" n'en était pas. L'amabilité, le fond, la forme et le ton n'y étaient pas non plus.

Citation:

puis-je suggérer

Quelle mauvaise foi...

J'étais plein de bonnes intentions avant de me prendre un "Plutôt qu'une critique négative stérile" dans la gueule. Et c'est toi qui me fait des leçons d'aimabilité... M'enfin, passons...

Oui je me suis inspiré du code de Ben Alman. Il a bien fallu me documenter et je suis tombé dessus alors autant adapter le code d'un spécialiste. D'ailleurs, je remarque qu'il a choisi le même ordre d'arguments que moi pour son implémentation, ce qui me conforte dans l'idée que j'avais raison sur le fond.

Citation:

Le code proposé ne reprend pas votre idée d'utiliser la forme dynamique du gestionnaire d'événement on() avec inversion des sélecteurs par rapport à l'action.

Ben justement si ! Tu n'as rien dû comprendre à ce que j'ai voulu dire alors...

Citation:

Dans la mesure où le développeur veut identifier un clic en dehors d'un élément déterminé, ça me paraît plus logique de passer cet élément en premier. De plus, le cadre délimitant est facultatif, et pas l'élément exclus.

Code :

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

1
2
 
$(".exclus").on("clickout", function(event){})

ça me paraît clair ! on passe l'élément à exclure en premier. On ferait la même chose pour l'évènement mouseout

Vu que la discussion tourne clairement vers de la mauvaise foi de ta part, je pense que je ne vais pas insister plus longtemps... Chacun en tirera ses propres conclusions

danielhagnoul · 12/12/2012, 23h49

Je termine cette discussion en répondant à la question que j'attendais.

Pourquoi as-tu écrit un événement spécial "clickOutside" de cette manière ?

Pour détecter simplement un clic en dehors d'un élément du DOM, Ben Alam a écrit une version de "clickOutside" depuis longtemps et elle remplit parfaitement son rôle.

Mais il prend seulement en compte un click dans le document, alors que ma version peux détecter un click en dehors d'un ou de plusieurs éléments, mais à l'intérieur d'un ou de plusieurs autres. On peut donc s'en servir comme d'un "super not()". En fait, c'est de cette manière que je l'utilise le plus souvent.

Exemple :

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
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
<!DOCTYPE html>
<html lang="fr">
	<head>
		<meta charset="utf-8" />
		<meta name="author" content="Daniel Hagnoul">
		<title>Forum jQuery</title>
		<link href='http://fonts.googleapis.com/css?family=Sofia|Ubuntu:400|Kreon'>
		<link rel="stylesheet" href="http://danielhagnoul.developpez.com/styles/dvjhRemBase.css">
		<style>
			.hyphens { -moz-hyphens:auto; -webkit-hyphens:auto; -ms-hyphens:auto; hyphens:auto; }
			article { display:table-cell; text-align:justify; border:0.1rem dotted grey; }
			.table1, .table2 { border-collapse:separate; border-spacing:3rem; }
			.ligne { display:table-row; }
 
			.table1 .ligne { height:25rem; }
			.table1 article { width:40rem; vertical-align:top; }
 
			/* TEST */
			p { margin: 2rem; padding: 1.2rem; border: 0.1rem dotted grey; }
		</style>
	</head>
	<body>
		<h1>Forum jQuery</h1>
		<h2>Super not()</h2>
		<section class="conteneur">
			<section class="table1">
				<section>
					<article>
 
						<p>Un paragraphe</p>
						<p>Un paragraphe</p>
						<p>Un paragraphe</p>
						<p>Un paragraphe</p>
 
					</article>
					<article>
 
						<p>Un paragraphe</p>
						<p>Un paragraphe</p>
						<p>Un paragraphe</p>
						<p>Un paragraphe</p>
 
					</article>
				</section>
			</section>
		</section>
		<footer itemscope itemtype="http://danielhagnoul.developpez.com/">
			<time datetime="2012-12-12T23:23:49.800+01:00" pubdate>2012-12-12T23:23:49.800+01:00</time>
			<span itemprop="name">Daniel Hagnoul</span>
			<a href="http://www.developpez.net/forums/u285162/danielhagnoul/" itemprop="url">@danielhagnoul</a>
			<a href="http://danielhagnoul.developpez.com/" itemprop="url">Mon cahier d’exercices</a>
			<a href="http://javascript.developpez.com/faq/jquery/" itemprop="url">FAQ</a>
			<a href="http://javascript.developpez.com/cours/?page=frameworks#jquery" itemprop="url">Tutoriels</a>
		</footer>
		<script src="http://danielhagnoul.developpez.com/lib/raphael-min.js"></script>
		<script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
		<script src="http://code.jquery.com/color/jquery.color-2.1.1.min.js"></script>
		<script src="http://danielhagnoul.developpez.com/lib/dvjh/base.js"></script>
		<script>
			"use strict";
 
			/*
			 * Cliquez à l'extérieur !
			 * Special event clickOutside
			 * 
			 * Daniel Hagnoul
			 * Code v1.0.0 2012-12-09
			 * 
			 * L'événement requiert la transmission de l'attribut 
			 * identity dans l'argument data du gestionnaire
			 * d'événement.
			 * 
			 * L'attribut identity doit contenir un sélecteur 
			 * jQuery valide correspondant à un ou des éléments 
			 * du DOM.
			 * 
			 * Exemple : "article", ".test1" ou "#example".
			 * 
			 * L'événement ne se déclenche pas si
			 * le clic se produit dans un élément du DOM qui 
			 * possède ce sélecteur ou si l'un de ses ascendants
			 * possèdent ce sélecteur.
			 * 
			 * Pour un sélecteur non spécifique, comme une 
			 * classe ou un tag, cela peut être vu comme un 
			 * inconvénient, mais c'est aussi un comportement 
			 * souhaitable dans de nombreux cas.
			 * 
			 * Usage, exemple : $( document ).on( "clickOutside", 
			 * { "identity" : "#monID" }, function( event ){...});
			 */
			( function( $ ){
 
				var clickOutsideHandler = function( event ){
	    				var identity = event.data.identity || "";
 
	    				if ( $( event.target ).closest( identity )[ 0 ] === undefined ){
	    					event.type = "clickOutside";
	    					$.event.handle.apply( this, arguments );
	    				}
					};
 
	   			$.event.special.clickOutside = {
					setup : function( data, namespaces ){
						$( this ).on( "click", data, clickOutsideHandler );
					},
					teardown : function( namespaces ){
						$( this ).off( "click", clickOutsideHandler );
					}
	    		};
 
			})( jQuery );
 
			$(function(){
 
				/*
				 * Il est impossible d'interdire, facilement, le click sur les
				 * éléments P.
				 */
				/*
				$( "article ").not( "p" ).on( "click", function( event ){
					$( this )
						.animate({ "background-color" : "red" }, 1500 )
						.animate({ "background-color" : "white" }, 1500 );
				});
				*/
 
 
				/*
				 * L'événement "clickOuside" peut être utilisé comme
				 * un super not().
				 */
				$( "article" ).on( "clickOutside", { "identity" : "p" }, function( event ){
					$( this )
						.fadeTo( 1500, 0.1 )
						.fadeTo( 1500, 0.9 );
				});
 
			});
		</script>
	</body>
</html>

10/12/2012, 22h44	#3
danielhagnoul Rédacteur Daniel Hagnoul Étudiant perpétuel Inscription : février 2009 Messages : 3 840 Détails du profil Informations personnelles : Nom : Daniel Hagnoul Âge : 62 Localisation : Belgique Informations professionnelles : Activité : Étudiant perpétuel Secteur : Enseignement Informations forums : Inscription : février 2009 Messages : 3 840 Points : 14 331 Points : 14 331	Le choix du nom appartient à l'auteur. J'ai choisi "Cliquez à l'extérieur" qui se traduit par clickOutside. Je crois qu'un non-débutant en jQuery comprendra mes exemples d'utilisation et mes explications. Plutôt qu'une critique négative stérile, tu devrais écrire la version qui te convient et la posté à la suite et alors nous dire pourquoi tu penses qu'elle est supérieure à la proposition précédente. __________________ FAQ jQuery Mon cahier d’exercices sur jQuery & Co plugin dialogModal Si un message vous a aidé ou vous semble pertinent, votez pour lui !
	01

11/12/2012, 12h16	#5
danielhagnoul Rédacteur Daniel Hagnoul Étudiant perpétuel Inscription : février 2009 Messages : 3 840 Détails du profil Informations personnelles : Nom : Daniel Hagnoul Âge : 62 Localisation : Belgique Informations professionnelles : Activité : Étudiant perpétuel Secteur : Enseignement Informations forums : Inscription : février 2009 Messages : 3 840 Points : 14 331 Points : 14 331	Incompréhension mutuelle totale ! Vous me prêtez des sentiments et des intentions que je n'éprouve pas. Pour moi, en programmation, les critiques sont stériles lorsqu'elles ne sont pas appuyées par un code meilleur que celui qui est critiqué. Si vous aviez pris le temps de "jouer" avec mon code (vous reconnaissez que ce type de code est nouveau pour vous) et essayez d'appliquer vos idées, je suis persuadé que vous n'auriez pas émis les mêmes commentaires. En ce qui me concerne, sauf apport d'un meilleur code que le mien, le sujet est clos. __________________ FAQ jQuery Mon cahier d’exercices sur jQuery & Co plugin dialogModal Si un message vous a aidé ou vous semble pertinent, votez pour lui !
	00

Outils de la discussion
Afficher une version imprimable Envoyer un lien vers cette page par email