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>
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.fillRect(Math.clamp(mouse.x-5, 0, foo.width-10),
Math.clamp(mouse.y-5, 0, foo.height-10), 10, 10);
}, false);
canvas {
	outline: thick solid;
	margin: 100px;
<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.


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

This archive was generated by hypermail 2.3.1 : Monday, 2 May 2016 14:38:45 UTC