Re: [cssom] Element size/positioning information

Le Mer 13 avril 2011 16:21, Tab Atkins Jr. a écrit :
> 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?

Not before. First time now.

> 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.


Hold on a min. If the mouse is outside the <canvas> element, then this is
different. From the beginning, I thought you were hovering a leaf node
which had an ancestor (a containing block) in its containment hierarchy.

> 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.

I see what you mean.

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

Not anymore. Tab, let me think about it. I also want to examine your demo.

Gérard
-- 
CSS 2.1 Test suite RC6, March 23rd 2011
http://test.csswg.org/suites/css2.1/20110323/html4/toc.html

Contributions to CSS 2.1 test suite
http://www.gtalbot.org/BrowserBugsSection/css21testsuite/

Web authors' contributions to CSS 2.1 test suite
http://www.gtalbot.org/BrowserBugsSection/css21testsuite/web-authors-contributions-css21-testsuite.html

Received on Wednesday, 13 April 2011 23:59:02 UTC