ReactJS SyntheticEvent stopPropagation () ใช้ได้กับเหตุการณ์ React เท่านั้น?

ฉันกำลังพยายามใช้ event.stopPropagation () ภายในคอมโพเนนต์ ReactJS เพื่อหยุดเหตุการณ์การคลิกไม่ให้เดือดและทริกเกอร์เหตุการณ์การคลิกที่แนบมากับ JQuery ในโค้ดดั้งเดิม แต่ดูเหมือนว่า stopPropagation () ของ React จะหยุดการเผยแพร่ไปยังเหตุการณ์เท่านั้น ยังแนบอยู่ใน React และ stopPropagation () ของ JQuery ไม่หยุดการแพร่กระจายไปยังเหตุการณ์ที่แนบมากับ React

มีวิธีใดบ้างที่จะทำให้ stopPropagation () ทำงานในเหตุการณ์เหล่านี้ได้ ฉันเขียนJSFiddleง่ายๆเพื่อแสดงพฤติกรรมเหล่านี้:

/** @jsx React.DOM */
var Propagation = React.createClass({
    alert: function(){
        alert('React Alert');
    },
    stopPropagation: function(e){
        e.stopPropagation();
    },
    render: function(){
        return (
            <div>
                <div onClick={this.alert}>
                    <a href="#" onClick={this.stopPropagation}>React Stop Propagation on React Event</a>
                </div>
                <div className="alert">
                    <a href="#" onClick={this.stopPropagation}>React Stop Propagation on JQuery Event</a>
                </div>
                <div onClick={this.alert}>
                    <a href="#" className="stop-propagation">JQuery Stop Propagation on React Event</a>
                </div>
                <div className="alert">
                    <a href="#" className="stop-propagation">JQuery Stop Propagation on JQuery Event</a>
                </div>
            </div>
        );
    }
});

React.renderComponent(<Propagation />, document.body);

$(function(){    
    $(document).on('click', '.alert', function(e){
        alert('Jquery Alert');
    });

    $(document).on('click', '.stop-propagation', function(e){
        e.stopPropagation();
    });
});

React ใช้การมอบหมายเหตุการณ์กับผู้ฟังเหตุการณ์เดียวdocumentสำหรับเหตุการณ์ที่เกิดฟองเช่น "คลิก" ในตัวอย่างนี้ซึ่งหมายความว่าไม่สามารถหยุดการเผยแพร่ได้ เหตุการณ์จริงได้แพร่กระจายไปแล้วตามเวลาที่คุณโต้ตอบใน React stopPropagationเหตุการณ์สังเคราะห์ของ React เป็นไปได้เนื่องจาก React จัดการการแพร่กระจายของเหตุการณ์สังเคราะห์ภายใน

การทำงานJSFiddleกับการแก้ไขจากด้านล่าง

ตอบสนองหยุดการแพร่กระจายบนเหตุการณ์ jQuery

ใช้Event.stopImmediatePropagationเพื่อป้องกันไม่ให้ผู้ฟัง (jQuery ในกรณีนี้) อื่น ๆ ของคุณถูกเรียกใช้ ได้รับการสนับสนุนใน IE9 + และเบราว์เซอร์สมัยใหม่

stopPropagation: function(e){
    e.stopPropagation();
    e.nativeEvent.stopImmediatePropagation();
},

• Caveat: ผู้ฟังถูกเรียกตามลำดับที่พวกเขาถูกผูกไว้ ต้องเริ่มต้นการตอบสนองก่อนโค้ดอื่น ๆ (jQuery ที่นี่) เพื่อให้สามารถใช้งานได้

jQuery Stop Propagation on React Event

รหัส jQuery ของคุณใช้การมอบหมายเหตุการณ์เช่นกันซึ่งหมายความว่าการโทรstopPropagationในตัวจัดการจะไม่หยุดอะไรเลย เหตุการณ์ได้แพร่กระจายไปdocumentแล้วและผู้ฟังของ React จะถูกทริกเกอร์

// Listener bound to `document`, event delegation
$(document).on('click', '.stop-propagation', function(e){
    e.stopPropagation();
});

เพื่อป้องกันการแพร่กระจายเกินองค์ประกอบผู้ฟังต้องถูกผูกไว้กับองค์ประกอบนั้นเอง:

// Listener bound to `.stop-propagation`, no delegation
$('.stop-propagation').on('click', function(e){
    e.stopPropagation();
});

แก้ไข (2016/01/14):ชี้แจงว่าการมอบหมายจำเป็นต้องใช้สำหรับเหตุการณ์ที่เกิดขึ้นเท่านั้น สำหรับรายละเอียดเพิ่มเติมเกี่ยวกับการจัดการเหตุการณ์ตอบสนองของแหล่งที่มามีความเห็นเชิงพรรณนา: ReactBrowserEventEmitter.js

มูลค่า noting (จากปัญหานี้ ) ว่าถ้าคุณติดกิจกรรมเพื่อdocument, e.stopPropagation()ไม่ได้ไปช่วยเหลือ วิธีแก้ปัญหาชั่วคราวคุณสามารถใช้window.addEventListener()แทนจากdocument.addEventListenerนั้นevent.stopPropagation()จะหยุดเหตุการณ์ไม่ให้แพร่กระจายไปยังหน้าต่าง

ยังคงเป็นช่วงเวลาหนึ่งที่น่าสนใจ:

ev.preventDefault()
ev.stopPropagation();
ev.nativeEvent.stopImmediatePropagation();

ใช้โครงสร้างนี้หากฟังก์ชันของคุณถูกรวมไว้ด้วยแท็ก

ฉันสามารถแก้ไขปัญหานี้ได้โดยเพิ่มสิ่งต่อไปนี้ในส่วนประกอบของฉัน:

componentDidMount() {
  ReactDOM.findDOMNode(this).addEventListener('click', (event) => {
    event.stopPropagation();
  }, false);
}

เมื่อวานนี้ฉันพบปัญหานี้ดังนั้นฉันจึงสร้างโซลูชันที่เป็นมิตรกับปฏิกิริยา

ตรวจสอบการตอบสนองพื้นเมือง-ฟัง มันทำงานได้ดีมากจนถึงตอนนี้ คำติชมชื่นชม

จากปฏิกิริยาเอกสารการจัดการเหตุการณ์ดังต่อไปนี้จะเรียกโดยเหตุการณ์ในช่วงเดือดปุด ๆ หากต้องการลงทะเบียนตัวจัดการเหตุการณ์สำหรับขั้นตอนการจับภาพจับภาพผนวก (เน้นเพิ่ม)

หากคุณมีฟังเหตุการณ์การคลิกในรหัสการตอบสนองของคุณและคุณไม่ต้องการให้ฟองขึ้นผมคิดว่าสิ่งที่คุณต้องการจะทำคือการใช้แทนonClickCapture onClickจากนั้นคุณจะส่งต่อเหตุการณ์ไปยังตัวจัดการและทำevent.nativeEvent.stopPropagation()เพื่อป้องกันไม่ให้เหตุการณ์เนทีฟเดือดพล่านไปจนถึงผู้ฟังเหตุการณ์วานิลลา JS (หรืออะไรก็ตามที่ไม่ตอบสนอง)

อัปเดต: ตอนนี้คุณทำได้แล้ว <Elem onClick={ proxy => proxy.stopPropagation() } />

วิธีแก้ปัญหาด่วนใช้window.addEventListenerแทนdocument.addEventListener.