Capturing all the click event

前端未结

关注

 10  1547

无人共我

I am thinking of to add a javascript function to capture all the click events inside a html page.

So I am adding a global function that govern

相关标签:

10条回答

滥情空心

2020-12-14 09:01
Very simple :
```
document.getElementById("YOUR_ID").onclick = function (e) {...} 
```
The selector is what you want to select so lets say you have button called
```
<a href="#" id="button1">Button1</a>
```
The code to capure this is:
```
document.getElementById("button1").onclick = function (e) { alert('button1 clicked'); }
```
Hope that helps.
0 讨论(0)
发布评论:

提交评论
- 加载中...
-上瘾入骨i

2020-12-14 09:07
your idea to delegate the event to the window and then check if the "event.target" is a link, is one way to go (better would be document.body). The trouble here is that it won't work if you click on a child node of your element. Think:
```
<a href="#">I am bold</a>
```
the target would be the  element, not the link. This means checking for e.target won't work. So, you would have to crawl up all the dom tree to check if the clicked element is a descendant of a <a> element.

Another method that requires less computation on every click, but costs more to initialize would be to get all <a> tags and attach your event in a loop:
```
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: why do I convert the HTMLCollection to array? here's the answer.)
0 讨论(0)
发布评论:

提交评论
- 加载中...
终归单人心

2020-12-14 09:07
Some accepted answers dont work with nested elements like: <a href="...">link</a>

There is a basic solution for most cases: ```
```
var links = document.getElementsByTagName('a');
for(var i in links)
{
 links[i].onclick = function(e){
 e.preventDefault();
 var href = this.href;
 // ... do what you need here.
 }
}
```
0 讨论(0)
发布评论:

提交评论
- 加载中...

轮回少年

2020-12-14 09:17

You need to take into account that a link can be nested with other elements and want to traverse the tree back to the 'a' element. This works for me:

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
  }
}

See e.g. https://jsfiddle.net/hnmdijkema/nn5akf3b/6/

0 讨论(0)

失恋的感觉

2020-12-14 09:18
I guess this simple code will work with jquery.
```
 $("a").click(function(){
    alert($(this).attr('href'));
});
```
Without JQuery:
```
window.onclick = function(e) { 
if(e.target.localName=='a')
    alert(e.target);
};
```
The above will produce the same result.
0 讨论(0)
发布评论:

提交评论
- 加载中...

再見小時候

2020-12-14 09:20

You can handle all click using window.onclick and then filter using event.target

Example as you asked:

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

0 讨论(0)

1 2 下一页