모든 <a> 클릭 이벤트를 캡처

나는 HTML 페이지 내의 모든 <a> 클릭 이벤트를 캡처하는 자바 스크립트 함수를 추가 할 생각입니다.모든 <a> 클릭 이벤트를 캡처

그래서 나는 모든 <a> 클릭 이벤트에 적용 전역 함수를 추가하고 있지만, 각 onclick을 추가하지 않습니다 (둘 .onclick=도 attachEvent(onclick...)도 인라인 onclick= 사용)하지. 나는 각 <a>을 만지지 않고 html 내에 <a href="someurl">처럼 단순하게 남겨 둘 것입니다.

나는 window.onclick = function (e) {...} 을 시도했지만 그것은 단지 모든 클릭 어떻게 <a>에 만 클릭을 지정 않고 클릭되는 <a> 내부의 링크를 추출을 캡처?

제한 사항 : 저는 jQuery와 같은 exra 라이브러리를 사용하고 싶지 않습니다. 단지 바닐라 자바 스크립트입니다.

출처

2012-09-23 user1589188

죄송합니다. 모든 HTML 태그가 누락되었습니다. – user1589188

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

출처

2012-09-23 11:31:30

예. href를 필터링하고 추출하는 방법을 코드 예제가있는 경우 선택하겠습니다 – user1589188

고마워요! 결국 그것은 e.target과 xdazz의 e.target.localName을 조합 한 것입니다. 하지만 xdazz를 몇 분 만에 이기기 때문에 나는 – user1589188

을 골라 줄 것입니다! 이 처리하고 텍스트 필드를 클릭합니다 –

jQuery를 시도하고

이 기능에

$('a').click(function(event) { *your code here* });

이 방법으로 HREF 값을 추출 할 수 있습니다 : window.onclick를 사용하여 당신은 모든 클릭을 처리 할 수

$(this).attr('href')

출처

2012-09-23 11:27:18 FLCL

죄송합니다. 추가 라이브러리가 없으며 IE9 또는 Firefox 15 – user1589188

-3

매우 간단합니다 : 선택기 선택하려는 것입니다

document.getElementById("YOUR_ID").onclick = function (e) {...}

그래서 당신이이 capure하는 코드

<a href="#" id="button1">Button1</a>

라는 버튼이 말할 수 :

document.getElementById("button1").onclick = function (e) { alert('button1 clicked'); }

희망 도움이됩니다.

는

출처

2012-09-23 11:34:16 Kivylius

고마워,하지만 미안하지만, 난 수동으로 모든 단일 ID를 onclick 추가 싶지 않아요. 전역 함수를 모두 캡처 한 다음 내부 필터링을 수행합니다. – user1589188

같은

사용 뭔가 :
<a ...>link text</a>

:이 기술은 event delegation

[편집]라고

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

처럼, 중첩 된 HTML 요소를 폭 링크의 경우 clickHandler을 가능하게하는 기능을 추가

출처

2012-09-23 11:37:34 KooiInc

감사합니다! nodeName을 찾을 수 없다는 것 외에는 모두 좋은 것처럼 보입니다. from nodeName이라는 속성을 가지고 있지 않다 – user1589188

그 경우'/^a$/i.test (from.tagName)'을 사용하거나 [편집 된 답변보기] – KooiInc

감사합니다! 그것은 효과가있다! 하지만 미안하지만 다른 사용자를 선택해야했습니다. 다른 사람들에게도 코드가 유용 할 것입니다! – user1589188

window.onclick = function (e) { 
    if (e.target.localName == 'a') { 
     console.log('a tag clicked!'); 
    } 
}

The working demo.

출처

2012-09-23 11:43:55 xdazz

감사합니다. e.target.localName은 훌륭하게 작동합니다! 링크를 얻기 위해 e.target과 함께 사용할 수 있습니다! – user1589188

또한이를 사용하여 시도 할 수 있습니다 :

var forEach = Array.prototype.forEach; 
var links = document.getElementsByTagName('a'); 
forEach.call(links, function (link) { 
    link.onclick = function() { 
     console.log('Clicked'); 
    } 

});

그것은 작동, 난 그냥 테스트를!

작업 데모 : http://jsfiddle.net/CR7Sz/ 당신은 당신이 할 수있는 'HREF'값을 얻으려면 언급 한 의견에 어딘가에

그 이와 :

var forEach = Array.prototype.forEach; 
var links = document.getElementsByTagName('a'); 
forEach.call(links, function (link) { 
    link.onclick = function() { 
     console.log(link.href); //use link.href for the value 
    } 

});

데모 : http://jsfiddle.net/CR7Sz/1/

출처

2012-09-23 11:46:47

아이디어에 창에 이벤트를 위임 한 다음 "event.target"이 링크인지 확인하십시오. 한 가지 방법이 더 낫습니다 (document.body가 더 좋음). 여기서 문제는 요소의 하위 노드를 클릭하면 작동하지 않는다는 것입니다. 생각 :

<a href="#"><b>I am bold</b></a>

target가  요소가 아닌 링크가 될 것입니다. 즉, e.target을 확인하는 것은 작동하지 않습니다.. 따라서 클릭 된 요소가 <a> 요소의 자손인지 확인하기 위해 모든 dom 트리를 크롤링해야합니다.

초기화 이상을 모든 클릭에 덜 계산이 필요하지만 비용이 또 다른 방법은 모든 <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 변환 않는 이유 배열을? here's the answer.)

출처

2012-09-23 11:48:27 Roman

매우 유익한 정보! 이 문제에 대한 자세한 지식을 보여줍니다! 그러나 이것은 내가 씹을 수있는 것 이상입니다. 나는 비디오를 확인했다, thats는 정말로 나를 위해 전진한다. 그러나 분명히 당신의 지식은 다른 누군가에게 유용 할 것입니다! – user1589188

링크를 다른 요소와 중첩 할 수 있고 '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/

출처

2016-09-30 14:08:20

이 간단한 코드는 jquery와 함께 작동합니다. JQuery와없이

$("a").click(function(){ 
    alert($(this).attr('href')); 
});

window.onclick = function(e) { 
if(e.target.localName=='a') 
    alert(e.target); 
};

상기와 동일한 결과를 생성한다.

출처

2017-03-06 14:00:09

질문의 저자는 의견에서 그가 어떤 라이브러리도 사용하고 싶지 않다고 말하면 바닐라 자바 스크립트 만 사용합니다.나는 그 질문에 그 의견을 추가 할 것이므로 더 분명하다. –

안녕하세요, Morten, 당신이 물어 보았 듯이 나는 일반 자바 스크립트 코드를 편집했습니다. :) –

모든 <a> 클릭 이벤트를 캡처

답변

관련 문제