0

所以基本上我正在尝试建立这个网站，其中有一个页面上有一堆东西，为了找到你需要使用这种手电筒/工具在页面周围搜索的东西，看看下面有什么. 这是一个更好的例子的jsfiddle：

http://jsfiddle.net/pwneth/hj57k/1896/

CSS：

#tail {
border: 1000px solid #fff;
position: absolute;
float: left;
height: 100px;
width: 100px;
background-color: rgba(0,0,0,.0);
z-index: 100;
top: 0px;
left: 0px;
}

jQuery：

    $(document).bind('mousemove', function(e){
        $('#tail').css({
           left:  e.pageX - 1050,
           top:   e.pageY - 1050
        });
    });

HTML：

 <div id="content"></div>
 <div id="tail"></div>

基本上我想要的工作除了我希望能够访问当前 div 后面的 div 以便可以单击它并将我带到一个新页面。这样的事情可能吗？谢谢您的帮助。

4

1 回答 1

0

正如@JonnySooter 在上面的评论中发布的那样，如果您的浏览器要求不包括 IE <= 10 （请参阅：caniuse pointer-events），您可以使用样式：pointer-events: none;并且鼠标事件将在tail.

否则，您可以确定在单击事件发生时哪些元素位于鼠标位置之下。

使用这个问题的答案：find elements that are stacked under (visually) an element in jquery，您可以确定应该单击哪个元素：

Demo Fiddle

HTML：（修改为 DIV 的序列）

<div>kjashkfjaiufaewhfejakdkskjashkfjaiufaiufaewhfejakdkskjashkfjaiufaewhf</div>
<div>kjashkfjaiufaewhfejakdkskjashkfjaiufaiufaewhfejakdkskjashkfjaiufaewhf</div>
…
<div id="tail"></div>

代码（在 OP 的小提琴中与 jQuery 1.4.2 一起使用）：

function GetAllElementsAt(x, y) {
    var $elements = $("body *").map(function() {
        var $this = $(this);
        var offset = $this.offset();
        var l = offset.left;
        var t = offset.top;
        var h = $this.height();
        var w = $this.width();

        var maxx = l + w;
        var maxy = t + h;

        return (y <= maxy && y >= t) && (x <= maxx && x >= l) ? $this : null;
    });

    return $elements;
}

// Change to '.on' in more recent version of jQuery
$('#tail').bind('click', function(evt) {
    var $elements = GetAllElementsAt(evt.pageX, evt.pageY);

    // In this example, "There can be only one" - the zero'th element will be
    // the clicked element
    alert("You clicked on div #" + ($($elements[0]).prevAll().length + 1));
});
于 2013-09-12T18:31:21.767 回答