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