backbone.js - เหตุการณ์ที่รู้ว่าคลิกอะไร


96

ในคลาสมุมมอง backbone.js ของฉันฉันมีสิ่งที่ต้องการ:

...

events: {
  'click ul#perpage span' : 'perpage'
},

perpage: function() {
  // Access the text of the span that was clicked here
  // Something like: alert($(element).text())
},

...

เนื่องจากมาร์กอัปต่อหน้าของฉันอาจมีบางอย่างเช่น:

<ul id="perpage">
  <li><span>5</span></li>
  <li><span>10</span></li>
</ul>

แล้วฉันจะหาข้อมูลเกี่ยวกับองค์ประกอบที่ทำให้เกิดเหตุการณ์ได้อย่างไร หรือในกรณีนี้มีการคลิก?

คำตอบ:


132

โดยปกติในการผูกเหตุการณ์คุณจะใช้$(this)แต่ฉันค่อนข้างแน่ใจว่ามุมมอง Backbone ถูกตั้งค่าเพื่อให้thisอ้างอิงถึงมุมมองเสมอดังนั้นลองทำดังนี้:

perpage: function(ev) {
   alert($(ev.target).text());
}

แก้ไขล่าช้าจริงๆ : $(ev.currentTarget)คุณอาจต้องการที่จะใช้ ดู dicussion เกี่ยวกับคำตอบของ pawlik ด้านล่าง


1
ถ้าฉันถูกต้องสิ่งนี้ใช้ได้กับเหตุการณ์ jquery (ผู้โพสต์ถามถึง) อย่างไรก็ตามโปรดทราบว่าเหตุการณ์ที่ทริกเกอร์ผ่านฟังก์ชัน trigger () ของกระดูกสันหลังจะไม่ส่งข้อมูลนี้ (จะให้อาร์กิวเมนต์ที่ใช้เมื่อเรียก trigger ())
Jens Alm

1
@roufamatic - เนื่องจากเหตุการณ์เหล่านี้เป็นเหตุการณ์ JavaScript มาตรฐานจริงๆจึงไม่อยู่ในขอบเขตของ BackboneJS เอกสารเหล่านี้ไม่รวมการอ้างอิงของ HTML หรือ CSS ด้วย
skalee

1
"มุมมองกระดูกสันหลังถูกตั้งค่าเพื่อให้สิ่งนี้อ้างถึงมุมมองเสมอ" - ใช้เฉพาะกับเหตุการณ์ที่กำหนดด้วยdelegateEvents([events])หรือกับeventsวัตถุที่ส่งผ่านไปยังBackbone.View.extend(ซึ่งใช้วิธีเดิมเบื้องหลัง) สิ่งนี้ใช้ไม่ได้กับเหตุการณ์ที่ผูกไว้ในตัวเริ่มต้นวิธีการเรนเดอร์ ฯลฯ
skalee

98

ev.targetอาจทำให้เข้าใจผิดคุณควรใช้ev.currentTargetตามที่อธิบายไว้ในhttp://www.quirksmode.org/js/events_order.html


2
นานาน่ารู้ - แต่ดูเหมือนว่าจะไม่ได้ใช้งานใน IE - หรือ jQuery ทำการ normalization เพื่อแก้ไขปัญหานี้หรือไม่?
Jamie Wong

2
ดูเหมือน jQuery จะทำให้ทั้ง ev.target เป็นปกติเป็นองค์ประกอบ dom ที่เริ่มต้นเหตุการณ์และ ev.currentTarget เป็นองค์ประกอบ DOM ปัจจุบันภายในเฟสเดือดของเหตุการณ์ api.jquery.com/category/events/event-object
mikermcneil

6
ฉันแค่เล่นกับสิ่งนี้และเพื่อชี้แจงคุณอาจต้องการ ev.currentTarget เป็นมาตรฐานและปลอดภัยสำหรับการใช้งานในเบราว์เซอร์ที่รองรับ jQuery ทั้งหมด
mikermcneil

4
ใช่คุณต้องการใช้ currentTarget แทน target ตัวอย่างเช่นหากคุณเชื่อมโยงลิงก์ที่มีเป้าหมาย "<a> <span> ข้อความ </a>" ลูกอาจชี้ไปที่ <span> ไม่ใช่ <a>
Evgenii

นี่น่าจะเป็นคำตอบ event.targetให้คุณได้รับสิ่งที่คลิกเท่านั้น
Metropolis

0

คุณสามารถรับแอตทริบิวต์ที่คุณต้องการได้ ev ทำงานเป็นthis:

perpage: function(ev) {
        console.log($(ev.target).attr('name'));
}
โดยการใช้ไซต์ของเรา หมายความว่าคุณได้อ่านและทำความเข้าใจนโยบายคุกกี้และนโยบายความเป็นส่วนตัวของเราแล้ว
Licensed under cc by-sa 3.0 with attribution required.