JeuWeb Créez votre jeu par navigateur !

**Ter Rowan** · 27-03-2015, 03:15 PM

bonjour bonjour
j'ai passé quelques heures sur le sujet et j'ai enfin trouvé où était mon problème, mais je ne sais pas quelle solution apportée :

j'ai un svg inline dans ma page html.
A ce svg, je veux associer un événement, via jquery qui m'indique que la souris sort du svg :



<svg id ="map">

        <g id="toto">



            <circle cx="355" cy="320" r="8" stroke="black" fill="lightgrey"/>

        </g>

</svg>



$("#map").mouseleave(function(event){



    console.log("sortie de "+ event.target.id);

    return false;

});

et là patatra...

si ma souris pointe dans le "blanc" du svg (en dehors du cercle) et sort du cadre, le mouseleave se déclenche (c'est ce que je veux)
mais ...
si ma souris pointe dans le "blanc" du svg puis se déplace à l'intérieur du cercle, le mouseleave se déclenche aussi (c'est pas du tout ce que je veux)
de même si ma souris est à l'intérieur du cercle, et que le pointeur en sort pour être dans le cadre du svg, le mouseleave se déclenche encore...

du coup je ne sais pas quoi faire, je cherche encore mais si vous avez été confronté à cela... je veux bien un peu d'aide

**Ter Rowan** · 27-03-2015, 04:00 PM

bon j'ai trouvé un truc, mais pas terrible :

je pose le svg dans un div et j'utilise event.relatedTarget pour savoir si j'arrive dans ce div ou si je suis toujours dedans... C'est pas très propre je trouve donc si vous avez mieux... :-(

<div id="mapBoundary">

<svg id ="map">



$("#map").mouseleave(function(event){



    if ( typeof(event.relatedTarget)!='undefined'){

        if ( event.relatedTarget && event.relatedTarget.id=="mapBoundary"){

        console.log("target "+ event.target.id +



                    " current " +event.currentTarget.id+ 

                    " related " + event.relatedTarget.id);

        }

    }

    return false;

});

a noter pour que ça marche de tous les côtés (en particulier, si ont sort par en dessous) il faut un margin sur le svg (sinon le div prend exactement la place du svg et forcément, le related n'est plus le même

**niahoo** · (Modification du message : 27-03-2015, 06:04 PM par niahoo.)

L'event mouseleave sur le div directement ne fonctionnerait pas ? ça serait plus simple.

Sinon tu peux essayer ça :





$('#mapBoundary').on('mouseleave', 'svg', function(){ /* … */ })

Si tu veux vraiement que l'event référence le svg et pas le div. Mais ça risque de poser le même problème que ta première implémentation.

**Ter Rowan** · 28-03-2015, 09:57 AM

(27-03-2015, 06:02 PM)niahoo a écrit : L'event mouseleave sur le div directement ne fonctionnerait pas ? ça serait plus simple.

Sinon tu peux essayer ça :
$('#mapBoundary').on('mouseleave', 'svg', function(){ /* … */ })
Si tu veux vraiement que l'event référence le svg et pas le div. Mais ça risque de poser le même problème que ta première implémentation.

oui ça fait pareil
autant j'arrive à arrêter le bouillonnement d'un événement, autant je n'ai pas trouvé de méthode simple pour freiner la capture

sinon j'ai imaginé une autre méthode, que je n'ai pas essayé :
créer un rectangle en fin du svg (pour qu'il soit au dessus du reste) sur toute la surface de l'image, rempli (fill) d'une couleur quelconque (en dehors de none) avec une opacité super faible voire nulle et porter l'évenement dessus

ainsi les balises en dessous visuellement ne seraient pas touchées par l'événement. Mais bon ça induit une complexité à traiter (mettre après ce rectangle les balises qui géreraient des événements, en dessous les autres, le tout sans logique métier

**Xenos** · 28-03-2015, 10:42 AM

Pour le rectangle SVG, c'est fill:transparent mais tu vas couper tous les évènements des éléments en dessous de ce rectangle (pas de mouse hover sur les autres éléments du SVG donc).

Après, je dirai que ton soucis se situe ailleurs: ceci



<!DOCTYPE html>

<html>

	<head>

		<meta charset="utf-8"/>

		<title>SVG events</title>

		<style>

			.results {

				display: block;

			}

			svg {

				width: 160px;

				border: 1px solid black;

			}

		</style>

		<script src="http://cdn.jsdelivr.net/jquery/2.1.3/jquery.min.js"></script>

	</head>

	<body>

		

		<svg id="map" viewBox="0 0 100 100">

			<circle cx="50" cy="50" r="60" fill="red"/>

			<circle cx="50" cy="50" r="30" fill="green"/>

		</svg>

		<ul class="results">

			<li>Ready</li>

		</ul>

		<script>

			$(document).ready(function () {

				$('.results').append($('<li/>').text('Start...'));

				

				$('#map').on('mouseleave', function() {

					$('.results').append($('<li/>').text('Leaving...'));

				});

				$('#map').on('mouseenter', function() {

					$('.results').append($('<li/>').text('Entering...'));

				});

			});

		</script>

	</body>

</html>

Marche très bien chez moi (FF à jour)... Si la souris quitte le cadre du SVG, mouseleave se déclenche,; tant que la souris reste dans le SVG (qu'elle soit sur le cercle ou non), rien ne se passe...

**Ter Rowan** · 28-03-2015, 07:55 PM

mouarf c'est bizarre, mon code ne marche pas avec ta version de jquery et inversement (faut dire je suis en 1.6)

je vais creuser mais bon pas de pc pendant une semaine donc...

**Xenos** · 28-03-2015, 08:41 PM

Ah, d'accord, ce serait en fait un bug jQuery...!
Y'a pas de possibilité d'upgrader? Je sais que jQuery 1 & 2 sont assez disjoints, mais je pense que sur le long terme, tu y gagneras de toute façon, non?

**Ter Rowan** · 28-03-2015, 09:35 PM

faut que je vois oui

maintenant si ma version répond à mes besoins sans faire bugguer, je vais pas forcément me fatiguer

**niahoo** · 28-03-2015, 10:27 PM

Bon après gérer des events en JS natif c'est pas dur ; ça vaut peut-être le coup de le faire dans le cas présent, comme ça plus de problème de version et tu peux adresser les différents bugs de chaque navigateur.

**Ter Rowan** · 09-04-2015, 04:55 PM

(28-03-2015, 10:27 PM)niahoo a écrit : Bon après gérer des events en JS natif c'est pas dur ; ça vaut peut-être le coup de le faire dans le cas présent, comme ça plus de problème de version et tu peux adresser les différents bugs de chaque navigateur.

bah a partir du moment où j'utilise jquery, j'essaie de l'utiliser sur l'ensemble des fonctionnalités proposées Smile

en creusant un peu je m'aperçois que .attr() n'a pas le même comportement pour la manipulation du svg que je veux en faire :

sur ma version, il n'y a pas besoin de setter l'attribut viewbox pour pouvoir le manipuler (en fait je l'ai dans mon svg mais pas settée par javascript), sur la version jquery de Xenos, il y a besoin :

Citation :As of jQuery 1.6, the .attr() method returns undefined for attributes that have not been set

ce qui est marrant c'est que je suis en 1.6 justement

j'ai vraiment l'impression que jquery passe à côté des manipulations svg ou bien je m'y prends mal

je vais quand même essayer de voir ce qu'il faudrait changer d'autres, mais si j'ai trop de difficultés je reviens à ma version, d'autant que j'ai un paquet de fonctionnalités avec svg qui marchent, je ne vais pas multiplier les risques de tout refaire

Sujets apparemment similaires…
Sujet		Auteur	Réponses	Affichages	Dernier message
	[JS] Positionner la windows où l'on veux avec des scrolls désactivées?	Argorate	13	4 791	26-03-2013, 03:02 PM Dernier message: Murthy
	[Javascript] Utiliser variable dans le .animate({}) de jQuery ?	Argorate	9	4 758	08-11-2012, 11:52 PM Dernier message: Sephi-Chan
	Javascript comme traducteur ?	Ter Rowan	8	3 415	19-12-2011, 04:37 PM Dernier message: Viciousity
	[Javascript] Peut-on supprimer selecteur jQuery :animated ?	Argorate	1	2 143	21-08-2011, 01:00 PM Dernier message: Sephi-Chan
	[Résolu][JavaScript & jquery] Affichage contenu DIV	tog84	4	3 230	07-08-2008, 06:00 PM Dernier message: tog84