onBlur avec une exception?

**itokia** · 28/11/2013, 09h39

Bonjour,

Peut on déclencher un onBlur seulement si l'on clique sur certain éléments?

J'ai un formulaire contenant plusieurs champs dont 2, un qui est une liste avec le contenu de ma base et une 2 emes qui est une liste vide.
Lorsque je clique sur un bouton il me bascule l'élément sélectionné de ma première liste a ma deuxième.

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 également avant d'exécuter ma fonction de mon bouton.

Code :

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

1
2
3
4
5
6
7
    $('#maPremiereListe')
            .click(function(e){
            .blur(function(e){
                        //Fonction qui me désélectionne un ou plusieurs éléments d'une liste
                        selectall(false,this.id);
            }
    );

Est ce que sur mon onBlur je peux lui dire de ne pas se déclencher si je clique sur mon bouton?
Merci

**danielhagnoul** · 28/11/2013, 11h04

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 :

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
<!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>

onBlur avec une exception?

jQuery

Vue hybride

Discussions similaires

Partager

Partager