onBlur avec une exception?

Citation:

Envoyé par itokia

Je souhaite désélectionné mes éléments de la première liste si je clique par exemple sur le fond de la page.

J'arrive à le faire sauf que si je clique sur mon bouton pour basculer l'élément il me le désélectionne égalementi

Bonjour

C'est le comportement normal, je ne comprends pas ce qui vous gêne dans le comportement par défaut.

Pour que l'on parle de la même chose sur le même code, voici ma page de test qu'il suffit de copier-coller pour tester.

Code:

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
<!DOCTYPE html>
<html lang="fr" dir="ltr">
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="initial-scale=1.0">
	<meta name="author" content="Daniel Hagnoul">
	<title>Forum jQuery, DVP</title>
	<script src="http://cdnjs.cloudflare.com/ajax/libs/headjs/1.0.3/head.min.js"></script>
	<link href='http://fonts.googleapis.com/css?family=Sofia|Ubuntu:400|Kreon'>
	<script>
		"use strict";
 
		 /*
		  * On utilise head.js pour charger JS et CSS de manière asynchrone 
		  * et parallèle, mais on les exécute dans l'ordre.
		  * Voir la documentation et l'API : http://headjs.com/
		  * Les polices de caractères et le fichier head.js doivent être 
		  * inclus manuellement.
		  */
		head.load(
			{ "d3" : "http://d3js.org/d3.v3.min.js" },
			"http://danielhagnoul.developpez.com/lib/dvjh/d3HeadBase.js",
			{ "jquery" : "http://code.jquery.com/jquery-2.0.3.min.js" },
			{ "jqueryui" : "http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js" },
			"http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/i18n/jquery-ui-i18n.min.js",
			"http://danielhagnoul.developpez.com/styles/dvjhRemBase.css",
			"http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.2/themes/sunny/jquery-ui.min.css"
		);		
	</script>
	<style>
		/* TEST -- Nota bene : ici 1 rem est égal à 10 px, voir dvjhRemBase.css */
 
		select { width: 10rem; }
		#btn { display: none; }
 
	</style>
</head>
<body>
	<header>
		<hgroup>
			<h1>Forum jQuery</h1>
			<h2>
				<a href="">Lien</a>
			</h2>
		</hgroup>
	</header>
	<section class="conteneur">
 
<!-- Début code du test -->
 
<select id="liste1" size="5">
	<option value="10">10</option>
	<option value="20">20</option>
	<option value="30">30</option>
	<option value="40">40</option>
	<option value="50">50</option>
</select>
 
<select id="liste2" size="5"></select>
 
<button id="btn">Append to liste 2</button>
 
<!-- Fin code du test -->
 
	</section>
	<footer itemscope itemtype="http://danielhagnoul.developpez.com/">
		<time datetime="22013-10-31T16:01:57.880+01:00" pubdate>2013-10-31T16:01:57.880+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>
		"use strict";
 
		/*
		 * Chargeur de code head.js, document ready et fichiers chargés.
		 */
		head.ready( [ "d3", "jquery", "jqueryui" ], function(){
 
			var ISOformat = d3.time.format( "%Y-%m-%dT%H:%M:%S.%L%Z" );
 
/* Début code du test */
 
$( "#btn" ).on( "click", function(){
	$( "#liste2" ).append( $( "option:selected", "#liste1" ) );
});
 
$( "#liste1" ).on( "focusin", function(){
	$( "#btn" ).fadeIn( 800 );
});
 
$( "#liste1" ).on( "focusout", function(){
	$( "#btn" ).fadeOut( 800 );
});
 
/* Fin code du test */
 
		});
	</script>
</body>
</html>