javascript获取遮盖层被点击时下面的DOM对象

  今天在csdn看到一个问题:整个网页用div遮住,鼠标点击上面的div怎么获得鼠标下面遮住的HTML元素

 

  思路:计算页面内所有的DOM对象的范围存储在一个数组中,在点击遮盖层的时候获取鼠标点击坐标,然后遍历数组判断点击坐标是否在数组对象的范围之内,是则返回这个对象。

 

  示例代码如下

<style></style>
<div style="width:200px;height:100px;">我是div</div>文字内容
<a href="/">Web开发网1</a><br />文字内容
<a href="/">Web开发网2</a><br />文字内容
<a href="/">Web开发网3</a><label>获取点击了遮盖层下的DOM对象</label><br />
<a href="/">Web开发网4</a><label>获取点击了遮盖层下的DOM对象</label><br />
<a href="/">Web开发网5</a><span>获取点击了遮盖层下的DOM对象</span>
<a href="/">Web开发网6</a><ul><li>获取点击了遮盖层下的DOM对象1</li><li>获取点击了遮盖层下的DOM对象2</li></ul>
<a href="/">Web开发网7</a><br /><img src="/logo.jpg" alt="编程设计网" />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<script type="text/javascript">
    var nodes = [];
    function computeRange(o) {//获取对象范围
        var p = { x: o.offsetLeft, y: o.offsetTop,x1:o.offsetWidth,y1:o.offsetHeight };
        while (o = o.offsetParent) {
            p.x += o.offsetLeft;
            p.y += o.offsetTop;
        }
        p.x1 += p.x;
        p.y1 += p.y;
        return p;
    }
    function GetObject(e) {
        var x = e.clientX + Math.max(document.body.scrollLeft, document.documentElement.scrollLeft),
            y = e.clientY + Math.max(document.body.scrollTop, document.documentElement.scrollTop);
        for (var i = 0, j = nodes.length; i < j; i++)
            if (nodes[i].p.x <= x && nodes[i].p.x1 >= x && nodes[i].p.y <= y && nodes[i].p.y1 >= y) return nodes[i];
        alert('没有节点在点击范围内'+x+"+"+y);
    }
    window.onload = function () {
        var nodes = document.getElementsByTagName('*'), node;
        for (var i = 0, j = nodes.length; i < j; i++)
            if (!/style|head|script|html|body|title|br|ul/i.test(nodes[i].tagName)) { //过滤掉不需要的标签,如ul这些只是容器,要获取li就需要过滤掉ul,要不点击li的时候获取到的只能是ul,因为li包含在ul中,还有dl之类之类的自己添加进去
                node = nodes[i];
                node.p = computeRange(node);
                window.nodes[window.nodes.length] = node;
            }
        var dv = document.createElement('div');
        dv.onclick = function (e) {
            var o = GetObject(e || window.event);
            if (o) alert(o.tagName + '\n' + o.innerHTML);
        }
        var isStrict = document.compatMode != 'CSS1Compat';
        dv.style.cssText = 'height:' + document[isStrict ? 'body' : 'documentElement'].scrollHeight
            + 'px;width:' + document[isStrict ? 'body' : 'documentElement'].scrollWidth
            + 'px;position:absolute;left:0px;top:0px;background:#000;filter:alpha(opacity=10);opacity:.1';
        document.body.appendChild(dv);
    }
</script>

 

加支付宝好友偷能量挖...


原创文章,转载请注明出处:javascript获取遮盖层被点击时下面的DOM对象

评论(0)Web开发网
阅读(413)喜欢(0)JavaScript/Ajax开发技巧