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

pointer events outside the viewport

Expand Messages
  • reuvenackner@yahoo.com
    In the SVG code listed bellow, a small circle tracks the location of the mouse and the mouse coordinates are also shown. When I embed this code in a html
    Message 1 of 1 , Feb 3, 2001
    • 0 Attachment
      In the SVG code listed bellow, a small circle tracks the location of
      the mouse and the mouse coordinates are also shown.
      When I embed this code in a html document listed below I observe the
      following behavior:
      1. When the mouse is in the viewport area, everything works as
      expected and the circle tracks the mouse location.
      2. When the mouse moves from inside the viewport to the outside, I
      stop getting the mousemove events (although I am above the the big
      rectangle).
      3. If I press the mouse inside the viewport and drag it outside, I
      continue to get the mousemove events outside the viewport.

      If I don't embed the svg document and view it as an independent
      document, I get yet another behavior:
      Without pressing the mouse I get mousemove events when the mouse is
      outside the viewport and is in the area of large x values or large y
      values (x>300 or y>300). If I move to area of negative x or y I stop
      getting the events (an area outside the window).

      These behaviors seem inconsistant and I wonder what the SVG Standard
      says about this?
      I personally would like to be able to continue to get the mousemove
      event from the outside of the viewport without pressing and dragging
      the mouse so, for example, I can hide the circle if the mouse gets
      ouside the viewport.

      Software details: Windows 98se, Adobe SVG Viewer Ver. 1.0 and IE5.5
      or NN4.7 (same behavior).

      Any comments would be appreciated.
      Reuven Ackner

      <svg width="300" height="300" viewBox="0 0 300 300">
      <script><![CDATA[
      function doOnMouseMove(evt){
      var root=evt.getTarget().getOwnerDocument();
      var x=evt.getClientX();
      var y=evt.getClientY();
      root.getElementById("circ").setAttribute("cx",x);
      root.getElementById("circ").setAttribute("cy",y);
      root.getElementById("info").getFirstChild().setData(x+" "+y);
      }
      ]]></script>
      <g onmousemove="doOnMouseMove(evt)">
      <rect x="-2000" y="-2000" width="4000" height="4000"
      style="fill:yellow;" />
      <circle id="circ" r="10" />
      <text id="info" x="10" y="10"> </text>
      </g>
      </svg>

      html:
      <HTML>
      <HEAD><TITLE> test</TITLE></HEAD>
      <body></center>
      <embed src="test.svg" name="SVGEmbed"height="300" width="300"
      type="image/svg-xml">
      </center></body>
      </HTML>
    Your message has been successfully submitted and would be delivered to recipients shortly.