요소를 클릭하는 방법 (전체 문서)?

150

클릭 한 HTML 문서에서 현재 요소 (어떤 요소이든)를 얻고 싶습니다. 나는 사용하고있다 :

$(document).click(function () {
    alert($(this).text());
});

그러나 매우 이상하게도 클릭 된 요소가 아닌 전체 (!) 문서의 텍스트를 얻습니다.

클릭 한 요소 만 얻는 방법은 무엇입니까?

예

<body>
    <div class="myclass">test</div>
    <p>asdfasfasf</p>
</body>

"테스트"텍스트를 클릭하면 $(this).attr("myclass"jQuery에서)로 속성을 읽을 수 있기를 원합니다 .

— 사용자 1145216
소스

2

핸들러 함수는 문서에 추가 된 요소의 범위에서 실행됩니다. target이벤트 객체 의 속성을 가져와야합니다.

— Bergi

238

event.target원래 이벤트를 트리거 한 요소 인 which 를 사용해야합니다 . this귀하의 예제 코드는를 의미한다 document.

jQuery에서 그것은 ...

$(document).click(function(event) {
    var text = $(event.target).text();
});

jQuery가 없으면 ...

document.addEventListener('click', function(e) {
    e = e || window.event;
    var target = e.target || e.srcElement,
        text = target.textContent || target.innerText;   
}, false);

또한 attachEvent()대신 <IE9를 지원해야하는지 확인하십시오 addEventListener().

— 알렉스
소스

1

반환 된 요소가 어떻게 든 약간 다르다는 if(event.target === myjQueryDivElement)것을 알았습니다. 그래서 if(event.target.hasClass('mydivclass'))mydivclass는 내 요소가 가진 클래스였습니다.

— redfox05

나는 사파리에서 3 일 동안 일을 찾고 있었고 마침내이 게시물을 우연히 발견했습니다. 여러분 감사합니다

— Raymond Feliciano

3

@alex 야, 그래야 || target.innerText?

— Jevgeni Smirnov

30

event.target 얻을 element

window.onclick = e => {
    console.log(e.target);  // to get the element
    console.log(e.target.tagName);  // to get the element tag name alone
}

클릭 한 요소에서 텍스트를 얻으려면

window.onclick = e => {
    console.log(e.target.innerText);
}

— bhv
소스

26

body 태그 안에 다음을 사용하십시오.

<body onclick="theFunction(event)">

그런 다음 자바 스크립트에서 다음 함수를 사용하여 ID를 얻습니다.

<script>
function theFunction(e)
{ alert(e.target.id);}

— 말렉 투바 이사
소스

7

대상 요소는 event.target다음 에서 찾을 수 있습니다 .

$(document).click(function(event) {
    console.log($(event.target).text());
});

참고 문헌 :

http://api.jquery.com/event.target/

— 피터 폴 반 게 메르 덴
소스

3

delegate및을 사용하십시오 event.target. delegate하나의 요소가 자식 요소의 이벤트를 수신하고 처리하도록하여 이벤트 버블 링을 이용합니다. 이벤트가 시작된 객체를 나타내는 객체 target의 jQ 정규화 속성입니다 event.

$(document).delegate('*', 'click', function (event) {
    // event.target is the element
    // $(event.target).text() gets its text
});

데모 : http://jsfiddle.net/xXTbP/

— JAAulde
소스

2

이 시대에 언급해야 하는가 on()이상 권장한다 delegate(). 또한 / 를 document사용하지 않는 유일한 예외 는 어쨌든 가장 높은 처리 지점으로 버블 링하기 때문입니다. delegate()on()

— alex

잘 했어 우리는 하루 종일 직장에서 가장 최근의 jQuery로 업그레이드하지 않았으므로 on마음 이 미끄러졌습니다.

— JAAulde

1

@alex, 이벤트가 어쨌든 버블 링되고 핸들러가 관계없이 실행되어야하기 때문에 실제로 예외는 아닙니다. 그다지 다르지 않습니다. 그런 것 같아요 delegate... 불구하고 고려하는 오버 헤드 필터링을 가지고있다

— JAAulde

2

이 게시물이 실제로 오래되었다는 것을 알고 있지만 ID를 참조하여 요소의 내용을 얻으려면 다음과 같이하십시오.

window.onclick = e => {
    console.log(e.target);
    console.log(e.target.id, ' -->', e.target.innerHTML);
}

— Aft3rL1f3
소스

1

$(document).click(function (e) {
    alert($(e.target).text());
});

-2

다음은 jQuery 선택기를 사용하여 모든 클래스, ID, 유형 등의 태그를 쉽게 대상으로 지정할 수있는 솔루션입니다.

jQuery('div').on('click', function(){
    var node = jQuery(this).get(0);
    var range = document.createRange();
    range.selectNodeContents( node );
    window.getSelection().removeAllRanges();
    window.getSelection().addRange( range );
});

— 헨리 로켓
소스