วิธีการรับองค์ประกอบคลิก (สำหรับเอกสารทั้งหมด)?

150

ฉันต้องการรับองค์ประกอบปัจจุบัน (องค์ประกอบใดก็ตามที่เป็น) ในเอกสาร HTML ที่ฉันคลิก ฉันใช้:

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

แต่แปลกมากฉันได้รับข้อความของเอกสารทั้งหมด (!) ไม่ใช่องค์ประกอบที่ถูกคลิก

จะได้รับเฉพาะองค์ประกอบที่ฉันคลิกเท่านั้นได้อย่างไร

ตัวอย่าง

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

หากฉันคลิกที่ข้อความ "test" ฉันต้องการอ่านแอตทริบิวต์ด้วย$(this).attr("myclass") ใน jQuery

— user1145216
แหล่งที่มา

2

ฟังก์ชั่นจัดการดำเนินการในขอบเขตขององค์ประกอบมันจะเพิ่มไปที่นี่เอกสาร คุณจะต้องได้รับtargetคุณสมบัติของวัตถุเหตุการณ์

— Bergi

238

คุณต้องใช้event.targetองค์ประกอบซึ่งเป็นองค์ประกอบที่ก่อให้เกิดเหตุการณ์ ในตัวอย่างของคุณรหัสหมายถึงthisdocument

ใน 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);

นอกจากนี้ยังตรวจสอบให้แน่ใจว่าคุณจะต้องสนับสนุน <IE9 ที่คุณใช้แทนattachEvent()addEventListener()

— อเล็กซ์
แหล่งที่มา

1

ฉันพบว่าองค์ประกอบที่กลับมาแตกต่างกันเล็กน้อยดังนั้นฉันจึงไม่if(event.target === myjQueryDivElement)สามารถทำได้: if(event.target.hasClass('mydivclass'))mydivclass เป็นคลาสที่องค์ประกอบของฉันมี

— redfox05

ฉันได้รับการมองหางานใน Safari เป็นเวลา 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 onclick="theFunction(event)">

จากนั้นใช้ javascript ในฟังก์ชั่นต่อไปนี้เพื่อรับ ID

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

— Malek Tubaisaht
แหล่งที่มา

7

คุณสามารถค้นหาองค์ประกอบเป้าหมายได้ในevent.target:

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

อ้างอิง:

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

— Peter-Paul van Gemerden
แหล่งที่มา

3

การใช้งานและdelegate ใช้ประโยชน์จากการเดือดปุด ๆ เหตุการณ์โดยให้องค์ประกอบหนึ่งฟังและจัดการเหตุการณ์ในองค์ประกอบเด็ก เป็นคุณสมบัติที่ทำให้ jQ ได้รับการปรับให้เป็นมาตรฐานของวัตถุที่แสดงถึงวัตถุที่เกิดเหตุการณ์event.targetdelegatetargetevent

$(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 );
});

— Henry Lockett
แหล่งที่มา