S4 - Javascript

Voici une première correction, simple, mais qui pose un problème:

	$('#suggestions').mousedown(function(e)
	{
		console.log("Évènement mousedown");
		$('#recherche').val($(e.target).text());
		$('#suggestions').hide();
	});

Le problème est le suivant:

L'utilisateur peut cliquer dans la marge "entre deux lignes".
Essayez, pour voir ce qui se passe.

Dans ce cas le mousedown est arrivé directement sur le <ul> (#suggestions) et pas dans un <li>. C'est à dire que e.target est "#suggestions" et pas un <li>.

La solution est de vérifier que e.target est bien un <li>:

if($(e.target).is('li')){ ...}

Comme c'est une situation fréquente, jQuery fourni une fonction qui permet de le faire facilement : .on()

Ce qui donne :

	$('#suggestions').on('mousedown' 'li',function(e){...});

Ce qui se traduit en français par « écouter tous les événements 'mousedown' arrivant sur '#suggestions' et ses descendants, mais ne retenir que ceux qui se produisent dans un élément donné par le sélecteur "li" »

Ce qui donne :

	$('#suggestions').on('mousedown','li',function(e)
	{
		console.log("Évènement mousedown");
		$('#recherche').val($(this).text());
		$('#suggestions').hide();
	});

   Remarquez que dans ".on()",  "this" désigne le "li" et non pas le "#suggestions".

... c'est un peu compliqué à suivre, mais on en aura besoin souvent  ...