Loading ...
Sorry, an error occurred while loading the content.

Re: toggle href onmousover onmouseout

Expand Messages
  • svgquestion
    Hi Helder, thank you very much for your help and your explications !!! I just tried out your suggestion. It works in IE9. Unfortunatelly, there is still a
    Message 1 of 3 , Apr 3, 2013
    • 0 Attachment
      Hi Helder,

      thank you very much for your help and your explications !!!
      I just tried out your suggestion. It works in IE9. Unfortunatelly, there is still a problem with IE10 ??? After mouseout all pointer events are frozen ?

      I have add a second use element even on the second element all pointer events are frozen ?


      It might be a bug In IE10 ?





      --- In svg-developers@yahoogroups.com, "HelderMagalhaes" <helder.magalhaes@...> wrote:
      >
      > > Dear list,
      >
      > Hi svgquestion,
      >
      >
      > > I have a very simple problem. I just would like to toggle the href attribute on a use element with onmouseover and onmouseout events. It works in Firefox. But It does not work in Chrome and IE9 ?
      >
      > It's not *that* simple, it's even a somehow tricky situation as you are toggling the use target in runtime and the toggling itself is made between symbol elements...
      >
      > That said, I've started instrumenting the code to try understand what was happening. Apparently both IE9 and Chrome are behaving as if the element is reset whenever replaced, including an event context loss, which causes a link replacement for each mouse event; the mouse out is never triggered due to that constant replacement (together with a performance hit as well - imagine a complex symbol being replaced dozens of times per second).
      >
      > I've slightly adapted the code to avoid the replace-per-mouse-event symptom, by adding a check, and left the debug code in case anyone wants to take a look at what's happening. The modified functions follow:
      >
      > function rec1(evt) {
      > var element = evt.currentTarget;
      > element.setAttributeNS(xlinkNS,"href","#symbolRect1");
      > // allow seeing what's happening
      > console.log(element.getAttributeNS(xlinkNS,"href"));
      > }
      >
      > function rec2(evt) {
      > var element = evt.currentTarget;
      > // avoid replacing the symbol for each mouse event
      > // (behavior seen in IE9 and Chrome/Safari)
      > if(element.getAttributeNS(xlinkNS,"href") != "#symbolRect2"){
      > element.setAttributeNS(xlinkNS,"href","#symbolRect2");
      > }
      > // allow seeing what's happening
      > console.log(element.getAttributeNS(xlinkNS,"href"));
      > }
      >
      >
      > I'm not sure if this behavior might be underspecified in the SVG specification; at least for now, I'm leaving that part investigation for the experts. ;-)
      >
      >
      > > Thank you for your help
      >
      > Hope this helps,
      > Helder
      >
    Your message has been successfully submitted and would be delivered to recipients shortly.