Opened 12 years ago

Closed 8 years ago

#5096 closed defect (wontfix)

event.layerX/Y sometimes incorrect

Reported by: guest Owned by: sjmiles
Priority: high Milestone: future
Component: Events Version: 1.0
Keywords: event layerX Cc:
Blocked By: Blocking:

Description (last modified by bill)

According to the dojo book the event.layerX and event.layerY are the coordinates of the event relative to the current target. It seems that I get the coordinates relative to the target instead of the current target in the following situation. A sample HTML page is included below.

I have an absolutely positioned outer div containing absolutely positioned child divs which are wider than the parent, but the overflow is hidden. The first child ("west") starts invisibly 100 pixels to the left of the outer div and ends in the middle of the outer div where the second child ("east") begins. I connect a function to the onmousemove event of the outer div. Whenever the mouse is moved over the outer div I get an event with the current target being the outer div and the target sometimes the "west" div and sometimes the "east" div.

Observed Behavior: The layerX coordinate starts at 100 when the mouse enters the outer div over the "west" child from the left and jumps back to 0, if the mouse is dragged to the left, when it crosses the border to the "east" div.

Expected Behavior: I expected that the event.layerX coordinate would start at 0 and that it would increase when moved to the right crossing the border to the "east" div.

It seems that the event.layerX coordinate is actually relative to the target instead of the currentTarget (which is always the outer div). The same holds for the layerY coordinate.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <title>dojo event layer coodinates test</title>
  <script type="text/javascript" src="http://o.aolcdn.com/dojo/1.0.0/dojo/dojo.xd.js"></script>
  <script type="text/javascript">
    function init() {
      dojo.connect(dojo.byId("main"), "onmousemove", window, "moved");
    }

    function moved(evt) {
      dojo.byId("label").innerHTML = "Target: " + evt.target.id +
                                     " Current Target: " + evt.currentTarget.id +
                                     " layerX: " + evt.layerX +
                                     " layerY: " + evt.layerY;
    }
  </script>
</head>
<body>


<div id="main" style="display: block; position: absolute; overflow:hidden; width: 400px; height: 400px;  border: solid blue; ">
  <div id="label" style="position: absolute; left:0; width: 400px; height:100px;"></div>
  <div id="west" style="position: absolute; left: -100px; width: 300px; top: 100px; background-color: red">
    WEST WEST WEST WEST WEST WEST WEST WEST WEST WEST WEST WEST WEST WEST WEST WEST</div>
  <div id="east" style="position: absolute; left: 200px; width: 300px; top: 100px; background-color: green;">
    EAST EAST EAST EAST EAST EAST EAST EAST EAST EAST EAST EAST EAST EAST EAST EAST</div>
</div>

<script type="text/javascript">
  dojo.addOnLoad(init);
</script>

</body>
</html>

Change History (4)

comment:1 Changed 12 years ago by dylan

Milestone: 1.2

comment:2 Changed 11 years ago by bill

Milestone: 1.21.3

move 1.2 bugs to 1.3

comment:3 Changed 11 years ago by bill

Description: modified (diff)
Milestone: 1.3future

comment:4 Changed 8 years ago by bill

Resolution: wontfix
Status: newclosed

See #14114.

Note: See TracTickets for help on using tickets.