Clicking with element on other element

Question

I know it sounds silly, but what I want to do is trigger click with some html element hovering over another element.

Lets say we got .cursor that is hovering anchor text. In this case click on .cursor should open a google page.

<div class="cursor"></div> 
<div class="htmlPage">
    <a href="www.google.com">Google</a>
    <a href="www.facebook.com">Faccebook</a>
     <a href="www.stackoverflow.com">Stack</a>
</div>

Any ideas how to do that?

and this don't count

$('.cursor').click(function(){
     $('.htmlPage a').click();
})

Cursor should be movable and should be able to click on other links.

Cursor on google

Cursor is that blue circle hovering Google button. Here I have cursor on google, now on click this should link to google, If i were to click on stack then stack should have opened.

What do you mean by `Cursor should be movable and should be able to click on other links`? Cursor will be movable, no restrictions on that are made — , Jul 12 '13 at 16:53

score 3 · Accepted Answer · answered Jul 15 '13 at 13:51

3

If you are not using IE you can use pointer-events:none in CSS. Then your element will be unresponsive to any mouse interaction (and acting like a ghost foreground element).

The workaround for IE is someting like that:

var x = event.pageX;
var y = event.pageY;
$('.cursor').hide();
var here = document.elementFromPoint(x, y);
$('.cursor').show();
// Do what you want with the element here
// Find the parent a element needed with here.parentNode and here.tagName === "A"
// And then fire the click function

I've never use jQuery but I think it should work.

Hope it could help

answered Jul 15 '13 at 13:51

orion78fr

166
2
8

I think you can even fire the onclick function to the here element directly as it would bubble to the a element – orion78fr Jul 15 '13 at 13:53
I was going to answer my own question with this. And best trick here is that you get object and you can trigger click and all other mouse effects. – Luka Jul 15 '13 at 16:13

score 1 · Answer 2 · answered Jul 12 '13 at 18:37

you can try to get the ".cursor" position on click and compare to each ".htmlPage a" positions and change the window.location.href with the one of the element that overlaps

$(".cursor").click(function(){
    var cursor=$(this);
    var cl = cursor.offset().left;
    var cr = cl+cursor.width();
    var ct = cursor.offset().top;
    var cb = ct+cursor.height();
    $(".htmlPage a").each(function(){
        var page=$(this);
        var pl = page.offset().left;
        var pr = pl+page.width();
        var pt = page.offset().top;
        var pb = pt+page.height();
        if(((cl>pl&&cl<pr)||(cr>pl&&cr<pr))&&((ct>pt&&ct<pb)||(cb>pt&&cb<pb))){
            window.location.href=page.attr("href");
        }        
    });
}).draggable();

http://jsfiddle.net/EUmeB/

score 0 · Answer 3 · 2013-07-12T17:14:54.103

0

Try this:

Demo

// Target link in the next div, following div.cursor
$("div.cursor").click(function() {
    var link = $(this).next(".htmlPage").children("a").attr("href");
    window.location.href = link;
});

edited Jul 12 '13 at 17:14

answered Jul 12 '13 at 16:50

Biggest problem here is that you can't access all the links. You can't trigger element below(under) cursor. – Luka Jul 12 '13 at 17:07
I see... hopefully this demo will help – Jul 12 '13 at 17:15
There can be only one cursor. – Luka Jul 12 '13 at 17:17
How is this being moved? Is user dragging it? Or does it just follow cursor? – Jul 12 '13 at 17:20
Its leap motion controled. But you can look it as its dragged. – Luka Jul 12 '13 at 17:24

score 0 · Answer 4 · answered Jul 12 '13 at 16:50

0

$('.cursor').click(function(){
     $('.htmlPage a').click();
})

answered Jul 12 '13 at 16:50

David

1,829
20
31

score 0 · Answer 5 · answered Jul 12 '13 at 16:52

0

Attach an event handler to the cursor class.

$('.cursor').on('click',function()
{
    window.location.href = $(this).siblings('.htmlPage').attr('href');
}

This gets the sibling of the element and makes the location equal to that sibling

answered Jul 12 '13 at 16:52

Jnatalzia

1,687
8
14

score 0 · Answer 6 · answered Jul 12 '13 at 16:52

0

To be a little more explicit, this might be best.

$('.cursor').click(function(){
  $(this).next().children('a').click();
});

answered Jul 12 '13 at 16:52

Collin Henderson

1,154
10
22

Clicking with element on other element

6 Answers6