单击其他元素上的元素

Question

我知道这听起来很傻，但我想做的是触发点击，其中一些html元素悬停在另一个元素上。

让我们说我们得到了悬停锚文本的.cursor。在这种情况下，单击.cursor应该打开一个谷歌页面。

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

任何想法如何做到这一点？

，这不计算

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

光标应该是可移动的，并且应该能够点击其他链接。

光标就是那个悬停谷歌按钮的蓝色圆圈。 在这里我有光标在谷歌，现在点击这应该链接到谷歌，如果我点击堆栈然后堆栈应该已经打开。

Answer 1

如果您不使用IE，可以在CSS中使用pointer-events:none。然后你的元素将无法响应任何鼠标交互（并且像鬼前景元素一样）。

IE的解决方法就是这样：

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

我从不使用jQuery，但我认为它应该有用。

希望它可以提供帮助

Answer 2

你可以尝试点击“.cursor”位置并与每个“.htmlPage a”位置进行比较，并将window.location.href与重叠的元素之一进行更改

$(".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/

Answer 3

试试这个：

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;
});

Answer 4

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

Answer 5

将事件处理程序附加到游标类。

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

这将获得元素的兄弟，并使位置等于兄弟

Answer 6

为了更明确一点，这可能是最好的。

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