W3C home > Mailing lists > Public > www-style@w3.org > April 2011

Re: [cssom] Element size/positioning information

From: Tab Atkins Jr. <jackalmage@gmail.com>
Date: Wed, 13 Apr 2011 16:21:10 -0700
Message-ID: <BANLkTimp0nuzVke6s7K2ko9kEZ69R3tnsw@mail.gmail.com>
To: www-style@gtalbot.org
Cc: www-style list <www-style@w3.org>
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


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

This archive was generated by hypermail 2.3.1 : Tuesday, 26 March 2013 17:20:39 GMT