+- JeuWeb - Crée ton jeu par navigateur (https://jeuweb.org)
+-- Forum : Discussions, Aide, Ressources... (https://jeuweb.org/forumdisplay.php?fid=38)
+--- Forum : Programmation, infrastructure (https://jeuweb.org/forumdisplay.php?fid=51)
+--- Sujet : [Javascript] JQuery leave ne réagit pas comme je veux sur un svg (/showthread.php?tid=7340)
[Javascript] JQuery leave ne réagit pas comme je veux sur un svg - Ter Rowan - 27-03-2015
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
RE: [Javascript] JQuery leave ne réagit pas comme je veux sur un svg - Ter Rowan - 27-03-2015
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
RE: [Javascript] JQuery leave ne réagit pas comme je veux sur un svg - niahoo - 27-03-2015
L'event mouseleave sur le div directement ne fonctionnerait pas ? ça serait plus simple.
Sinon tu peux essayer ça :
$('#mapBoundary').on('mouseleave', 'svg', function(){ /* … */ })
RE: [Javascript] JQuery leave ne réagit pas comme je veux sur un svg - Ter Rowan - 28-03-2015
(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 :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.
$('#mapBoundary').on('mouseleave', 'svg', function(){ /* … */ })
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
RE: [Javascript] JQuery leave ne réagit pas comme je veux sur un svg - Xenos - 28-03-2015
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...
RE: [Javascript] JQuery leave ne réagit pas comme je veux sur un svg - Ter Rowan - 28-03-2015
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...
RE: [Javascript] JQuery leave ne réagit pas comme je veux sur un svg - Xenos - 28-03-2015
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?
RE: [Javascript] JQuery leave ne réagit pas comme je veux sur un svg - Ter Rowan - 28-03-2015
faut que je vois oui
maintenant si ma version répond à mes besoins sans faire bugguer, je vais pas forcément me fatiguer
RE: [Javascript] JQuery leave ne réagit pas comme je veux sur un svg - niahoo - 28-03-2015
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.
RE: [Javascript] JQuery leave ne réagit pas comme je veux sur un svg - Ter Rowan - 09-04-2015
(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
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 setce 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