Hi again, I still have troubles getting things work... Here is my entire code, if you could help. This is a circle in a 'zone' where it's possible to zoom by drawing a selection rectangle. I desesperatly try to make the 'click' event fired to launch another action (here : change the color of the circle) when the user clicks on the circle but I can't do it. In the following code the zoom works but the 'click' event is never fired. If I comment all the code into the "if (evt.type == "mousedown")" statment, it works : the circle turns red (but obviously, the zoom doesn't work anymore) ! And I really can't find why. Thanks again for your help.
<?xml version="1.0" standalone="no"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN" "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd";> <svg onload="init()" width="600.0px" viewBox="0 0 6000.0 6000.0" height="600.0px" xmlns="http://www.w3.org/2000/svg"; xmlns:xlink="http://www.w3.org/1999/xlink"; id="carte"> <script type="text/ecmascript"> <![CDATA[ function init() { carto = document.getElementById("carte"); } var zoom = false, click = false, node = '', xsvg = 0, ysvg = 0, xsvg2 = 0, ysvg2 = 0; function all(evt) { if (evt.type == "click"){ document.getElementById("symb0").setAttributeNS (null,"fill","red"); } else if (evt.type == "mousedown"){ //document.getElementById("symb0").setAttributeNS (null,"fill","blue"); click = true; node = evt.target.ownerDocument.getElementById('zone'); xsvg = getTrueCoordX(evt.clientX); ysvg = getTrueCoordY(evt.clientY); node.setAttributeNS(null,'x',xsvg); node.setAttributeNS(null,'y',ysvg); node.setAttributeNS(null,'width','0'); node.setAttributeNS(null,'height','0'); node.setAttributeNS(null,'stroke-width',''+getTrueCoordR(10)); node.setAttributeNS(null,'visibility','visible'); } else if (evt.type == "mousemove"){ if (click) { zoom = true; xsvg2 = getTrueCoordX(evt.clientX); ysvg2 = getTrueCoordY(evt.clientY); w = Math.abs(xsvg2-xsvg); h = Math.abs(ysvg2-ysvg); node.setAttributeNS(null,'x',Math.min(xsvg,xsvg2).toString()); node.setAttributeNS(null,'y',Math.min(ysvg,ysvg2).toString()); node.setAttributeNS(null,'width',w.toString()); node.setAttributeNS(null,'height',h.toString()); } } else if (evt.type == "mouseup"){ if (click && zoom) { x = Math.min(xsvg,xsvg2); y = Math.min(ysvg,ysvg2); w = Math.abs(xsvg2-xsvg); h = Math.abs(ysvg2-ysvg); if (w > h) largeur = w; else largeur = h; if (x+largeur > 6000) largeur = 6000 - x; if (x+largeur < 0) x = 0; if (y+largeur > 6000) largeur = 6000 - y; if (y+largeur < 0) y = 0; vb = carto.getAttribute('viewBox'); vbatt = vb.split(' '); wvb = parseFloat(vbatt[2]); viewport=x.toString() + ' ' + y.toString() + ' ' + largeur.toString() + ' ' + largeur.toString(); carto.setAttributeNS(null,'viewBox',viewport); node.setAttributeNS(null,'visibility','hidden'); k = wvb / largeur; } click = false; zoom = false; } } function getTrueCoordX(x) { vb = carto.getAttribute('viewBox'); vbatt = vb.split(' '); xvb = parseFloat(vbatt[0]); wvb = parseFloat(vbatt[2]); return (xvb+x*(wvb/600)); } function getTrueCoordY(y) { vb = carto.getAttribute('viewBox'); vbatt = vb.split(' '); yvb = parseFloat(vbatt[1]); hvb = parseFloat(vbatt[3]); return (yvb+y*(hvb/600)) } function getTrueCoordR(r) { vb = carto.getAttribute('viewBox'); vbatt = vb.split(' '); wvb = parseFloat(vbatt[2]); return (r*wvb/6000); } ]]> </script> <g onmousemove="all(evt);" onmousedown="all(evt);" onmouseup="all(evt);"> <rect x="0" y="0" fill="white" width="6000.0" height="6000.0"/> <circle onclick="all(evt);" fill="midnightblue" r="532" id="symb0" cx="3338" cy="1677"/> <rect fill="none" stroke-width="10" id="zone" visibility="visible" stroke="rgb(100,100,100)" x="0" y="0" width="0" height="0"/> </g> </svg> --- In svg-developers@yahoogroups.com, "ddailey" <[EMAIL PROTECTED]> wrote: > > Hi Julie, > > I think what is happening when you put an alert in the middle of it all is this: > > first the onmousedown is received, evt.type is then "mousedown" > next an alert fires > then to get rid of the alert the user has to move the mouse off of the group (which received the mousedown) > so the click (which actually consists of a mousedown followed by a mouseup -- without any intervening mouseout event, I believe), is never actually received by the group. > > David > ----- Original Message ----- > From: julie gautier > To: svg-developers@yahoogroups.com > Sent: Wednesday, December 03, 2008 3:23 PM > Subject: Re : [svg-developers] onmousedown() and onclick() at the same time > > > Hi, > There's something I really don't understant, if somebody could help me : in the javascript code David sent, if I add an alert in the 'all' function : > > if (evt.type=="click"){ > alert(evt.target.nodeName); > } > else{ > alert(evt.type); > evt.currentTarget.firstChild.nextSibling.setAttributeNS (null,"fill" ,"red") > } > > then I have the following alerts : 'mousedown', 'mouseup' and the circle turns red. > If I comment the "alert(evt.type)", I have the alert : 'circle' and the circle turns red. > Could someone explain to me why this only line makes the "click" not fired anymore ?? > Thanks in advance. > > ________________________________ > De : "Dailey, David P." <[EMAIL PROTECTED]> > à : svg-developers@yahoogroups.com > Envoyé le : Mercredi, 3 Décembre 2008, 18h29mn 48s > Objet : RE: [svg-developers] onmousedown() and onclick() at the same time > > Take a look at the following; it lets different events on parts of the group be registered and responded to. > > Hope it helps > > David > > <svg xmlns="http://www.w3. org/2000/ svg" width="100%" > > xmlns:xlink= "http://www.w3. org/1999/ xlink" > > > > > <script><![CDATA[ > > xmlns="http://www.w3. org/2000/ svg" > > xlink="http://www.w3. org/1999/ xlink" > > function all(evt){ > > if (evt.type==" click") alert(evt.target. nodeName) > > else evt.currentTarget. firstChild. nextSibling. setAttributeNS( null,"fill" ,"red") > > } > > //]]> > > </script> > > <g onmousedown= "all(evt) ;" onmouseup="all( evt)"> > > <circle onclick="all( evt)" fill="black" r="5" cx="55" cy="55"/> > > <circle onclick="all( evt)" fill="black" r="5" cx="100" cy="100"/> > > </g> > > </svg> > > From: svg-developers@ yahoogroups. com [mailto:svg-developers@ yahoogroups. com] On Behalf Of jgfa92004 > Sent: Wednesday, December 03, 2008 6:07 AM > To: svg-developers@ yahoogroups. com > Subject: [svg-developers] onmousedown( ) and onclick() at the same time > > Hi, > > I have the following svg code : > > <g onmousedown= "down(evt) ;" onmouseup="up( evt);"> > <circle onclick="alert( 'circle1' )" fill="black" r="5" cx="5" cy="5"/> > <circle onclick="alert( 'circle2' )" fill="black" r="5" cx="0" cy="0"/> > </g> > > My problème is that the onclick event is never called, apparently > because of the onmousedown and onmouseup events called in the first g. > What should I do to be able to call another function when a circle is > clicked ? > Thanks a lot. > > [Non-text portions of this message have been removed] > > [Non-text portions of this message have been removed] > > > > > > [Non-text portions of this message have been removed] > ------------------------------------ ----- To unsubscribe send a message to: [EMAIL PROTECTED] -or- visit http://groups.yahoo.com/group/svg-developers and click "edit my membership" ----Yahoo! Groups Links <*> To visit your group on the web, go to: http://groups.yahoo.com/group/svg-developers/ <*> Your email settings: Individual Email | Traditional <*> To change settings online go to: http://groups.yahoo.com/group/svg-developers/join (Yahoo! ID required) <*> To change settings via email: mailto:[EMAIL PROTECTED] mailto:[EMAIL PROTECTED] <*> To unsubscribe from this group, send an email to: [EMAIL PROTECTED] <*> Your use of Yahoo! Groups is subject to: http://docs.yahoo.com/info/terms/
