Creating mousedown event with global scope

Question

I am hacking on something to fix another problem that is a constraint of the system. Not ideal, but..

Anyway, I need to generate a click/touch then find out the topmost element under the poing (300, 300). I am using:

event = $.Event( "mousedown", { pageX:300, pageY:300 } );
$("window").trigger( event );

Then I am listening for:

$(window).bind 'mousedown', (jQueryEvent)->
    console.log jQueryEvent.target

However, event.target is always returning window. This makes sense. However, what I am trying to do is generate a mousedown event on the whole page, then use event.target to find out which element is under the (pageX, pageY). Is there a way to do this?

score 1 · Accepted Answer · answered Mar 21 '13 at 21:20

1

I suggest you take a look at http://www.zehnet.de/2010/11/19/document-elementfrompoint-a-jquery-solution/ which is a full implementation.

answered Mar 21 '13 at 21:20

Robert

68
5

thanks. Ideally I would like to figure out why this is not working becuase I want to create a range of events – Alexis Mar 21 '13 at 21:27

score 0 · Answer 2 · answered Mar 21 '13 at 21:15

0

Have you looked at document.elementFromPoint? This might be a clean approach to find your element at a particular position.

https://developer.mozilla.org/en-US/docs/DOM/document.elementFromPoint

answered Mar 21 '13 at 21:15

Nico Valencia

141
3

score 0 · Answer 3 · answered Mar 21 '13 at 21:33

pageX and pageY are on the event variable itself, not on the target. But they get overwritten by the mousedown event. You dont need to create an event for this, closure will work just fine:

function hotspot (a, b) {
    var x = a[0] || 0;
    var y = a[1] || 0;
    var w = b[0] || 0;
    var h = b[1] || 0;
    function between (x2, y2) {
        return x2 >= x &&
            y2 >= y &&
            x2 <= (x + w) &&
            y2 <= (y + h);
    }
    return function (e) {
        console.log("mouse x y:", e.pageX, e.pageY);
        console.log("target x y w h:", x, y, w, h);
        console.log(between(e.pageX, e.pageY));
    }
}
$(document).on('mousedown', hotspot([0,0], [300,300]));

http://jsfiddle.net/gpaMz/1/

Edit: re-reading your question, I just don't know what you are trying to achieve.

Creating mousedown event with global scope

3 Answers3