Mis*_*hko 14 html javascript jquery click
在用户点击时,我想获得位于点击点的所有元素的列表.
例如,如果用户点击Hello此处:
<div><span>Hello<span></div>
我想得到以下列表:
<span> 元件<div> 元件<body> 元件<html> 元件获得这些元素最简单的方法是什么？
use*_*716 13
编辑:根据澄清,我认为这是你的意思:
编辑:正如指出的@Misha,outerWidth()并outerHeight()应代替使用width(),并height()为了得到一个准确的range.
此外,如果有什么可以阻止事件冒泡的页面上,则click应该置于document因为这将是很多更有效率.即使一些其他click处理防止起泡,你应该还是有click上document,只是从那些阻止冒泡处理器单独处理它.
示例: http ://jsfiddle.net/57bVR/3/
$(document).click(function(e) {
var clickX = e.pageX
,clickY = e.pageY
,list
,$list
,offset
,range
,$body = $('body').parents().andSelf();
$list = $('body *').filter(function() {
offset = $(this).offset();
range = {
x: [ offset.left,
offset.left + $(this).outerWidth() ],
y: [ offset.top,
offset.top + $(this).outerHeight() ]
};
return (clickX >= range.x[0] && clickX <= range.x[1]) && (clickY >= range.y[0] && clickY <= range.y[1])
});
$list = $list.add($body);
list = $list.map(function() {
return this.nodeName + ' ' + this.className
}).get();
alert(list);
return false;
});?
原始答案:
这将为您提供包含范围的标签名称数组.无法确定这是否是你想要的.
它采用了.parents()一起.andSelf()拿到的元素,然后使用.map()与.get()创建阵列.
示例: http ://jsfiddle.net/9cFTG/
var list;
$('span').click(function() {
list = $(this).parents().andSelf().map(function() {
return this.nodeName;
}).get();
alert(list);
});?
如果你只是想要的元素,而不是标签名称,摆脱.map()和.get().
或者,如果您想使用某种分隔符将Array加入String,只需添加.join(" ")之后.get(),将分隔符放在引号内.
在不久的将来,这应该是可能的:
$(document).click(function(e) {
var family = this.elementsFromPoint(e.pageX, e.pageY);
$(family).each( function () {
console.log(child);
});
});
| 归档时间： |
|
| 查看次数： |
5666 次 |
| 最近记录： |