Re: [cssom] Element size/positioning information

2011/4/13 "Gérard Talbot" <www-style@gtalbot.org>:
>> Yes.  There is no way to listen for a mouse event on an element's
>> ancestor, and then get mouse coordinate relative to that element,
>> without using clientX/Y and subtracting the element's position.
>
>
> I am reposting my explanation:
>
>>> If you want
>>> to listen to mouse events on the kth ancestor of an element, then you
>>> would register an event listener for that (kth ancestor) element. There
>>> is no serious difficulty with what you say and want to do.
>
>
> I still think you do not need to do those calculations (ie get mouse
> coordinate relative to an identified element within the containment
> hierarchy, then with using clientX/Y and subtracting the element's
> position). Events are dispatched (trickle down and bubble up), travel
> within the containment hierarchy. They are not cancelled unless you
> programmatically cancel the propagation; so the properties should always
> be retrievable.

Have you actually tried this?  Here, have a demo:

<!doctype html>
<script>
Math.clamp = function(x,under,over) {
 return Math.min(over, Math.max(under, x));
};

if( 'mozRequestAnimationFrame' in window ) {
 window.setDrawTimeout = function(func,elem) { return
window.mozRequestAnimationFrame(func); };
}
else if( 'webkitRequestAnimationFrame' in window ) {
window.setDrawTimeout = window.webkitRequestAnimationFrame; }
else {
 window.setDrawTimeout = function(func,elem) { return
setTimeout(func,1000/60); }
}

window.addEventListener('load', function(){
 var foo = document.querySelector('#foo');
 var c = foo.getContext('2d');
 var mouse = {x:0,y:0};
 window.addEventListener('mousemove',function(e) {
  var rect = foo.getBoundingClientRect();
  mouse.x = e.clientX - rect.left;
  mouse.y = e.clientY - rect.top;
 }, false);

 var drawFrame = function() {
  c.clearRect(0,0,foo.width,foo.height);
  c.fillRect(Math.clamp(mouse.x-5, 0, foo.width-10),
Math.clamp(mouse.y-5, 0, foo.height-10), 10, 10);
  setDrawTimeout(drawFrame,foo);
 };
 setDrawTimeout(drawFrame,foo);
}, false);
</script>
<style>
canvas {
 outline: thick solid;
 margin: 100px;
}
</style>
<canvas id='foo' width=200 height=200></canvas>

(I'm also attaching the file, in case linebreaking screws up the code.)

This demo draws a square in the canvas that follows the mouse, even if
the mouse is outside of the <canvas> element.  In order to do this, I
have to listen for mousemove on window, and compute the position where
I should raw the square by using clientX/Y and subtracting the
canvas's position.

You claim that this is possible some other way.  How?


>> In fact, I specifically
>> said, elsewhere in the email, that clientX/Y already serve this
>> purpose, they just have a horrible name.
>
> Bad name? Maybe. It may be a bit late now to rename those properties. They
> have been in use since IE4 and they are listed in (WD) DOM 3 events.
>
> Anyway, what do you suggest instead?
>
> viewportX/viewportY  ?

No, I gave a suggestion in the email you responded to, allowing you to
get mouse coordinates relative to several things, of which the
viewport was one possibility.

~TJ

Attachments

Received on Wednesday, 13 April 2011 23:21:58 UTC