use*_*188 18 javascript events capture
我想添加一个javascript函数来捕获<a>html页面内的所有点击事件.
所以我添加了一个管理所有<a>点击事件的全局函数,但没有添加onclick给每个(既不使用.onclick=也不attachEvent(onclick...)是内联onclick=).我会在html中留下<a>简单的内容,<a href="someurl">而不会触及它们.
我尝试window.onclick = function (e) {...}
但只捕获所有点击如何仅指定点击<a>并提取<a>被点击的内部链接？
限制:我不想使用任何exra库,如jQuery,只是vanilla javascript.
Koo*_*Inc 28
使用类似的东西:
document.body.onclick = function(e){
e = e || event;
var from = findParent('a',e.target || e.srcElement);
if (from){
/* it's a link, actions here */
}
}
//find first parent with tagName [tagname]
function findParent(tagname,el){
while (el){
if ((el.nodeName || el.tagName).toLowerCase()===tagname.toLowerCase()){
return el;
}
el = el.parentNode;
}
return null;
}
该技术称为事件委托
[ edit ]添加了一个函数,为链接宽度嵌套的html元素启用clickhandler,如:
<a ...><b><i>link text</i></b></a>
Art*_*dod 18
您可以使用window.onclick处理所有点击,然后使用event.target进行过滤
你问的例子:
<html>
<head>
<script type="text/javascript">
window.onclick = function(e) { alert(e.target);};
</script>
</head>
<body>
<a href="http://google.com">google</a>
<a href="http://yahoo.com">yahoo</a>
<a href="http://facebook.com">facebook</a>
</body>
</html>
?window.onclick = function (e) {
if (e.target.localName == 'a') {
console.log('a tag clicked!');
}
}?
您将事件委托给窗口然后检查“event.target”是否是链接的想法是一种方法（最好是document.body）。这里的问题是，如果您单击元素的子节点，它将无法工作。思考：
<a href="#"><b>I am bold</b></a>
thetarget将是<b>元素，而不是链接。这意味着检查e.target将不起作用。因此，您必须爬上所有 dom 树以检查被单击的元素是否是某个元素的后代<a>。
另一种每次点击需要较少计算但初始化成本更高的方法是获取所有<a>标签并将您的事件附加到循环中：
var links = Array.prototype.slice.call(
document.getElementsByTagName('a')
);
var count = links.length;
for(var i = 0; i < count; i++) {
links[i].addEventListener('click', function(e) {
//your code here
});
}
（PS：为什么我要将 HTMLCollection 转换为数组？这就是答案。）
小智 5
您需要考虑到链接可以与其他元素嵌套并希望遍历树回到 'a' 元素。这对我有用：
window.onclick = function(e) {
var node = e.target;
while (node != undefined && node.localName != 'a') {
node = node.parentNode;
}
if (node != undefined) {
console.log(node.href);
/* Your link handler here */
return false; // stop handling the click
} else {
return true; // handle other clicks
}
}
参见例如https://jsfiddle.net/hnmdijkema/nn5akf3b/6/
| 归档时间： |
|
| 查看次数： |
36266 次 |
| 最近记录： |