ReactJS SyntheticEvent stopPropagation () chỉ hoạt động với các sự kiện React?

Tôi đang cố gắng sử dụng sự kiện cũng được đính kèm trong React và stopPropagation () của JQuery không dừng lan truyền đến các sự kiện được đính kèm với React.

Có cách nào để làm cho stopPropagation () hoạt động trên các sự kiện này không? Tôi đã viết một JSFiddle đơn giản để thể hiện những hành vi này:

/** @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 sử dụng phân quyền sự kiện với một trình lắng nghe sự kiện duy nhất documentcho các sự kiện bong bóng, như 'nhấp chuột' trong ví dụ này, điều đó có nghĩa là không thể truyền bá; sự kiện thực sự đã được lan truyền theo thời gian bạn tương tác với nó trong React. stopPropagationtrên sự kiện tổng hợp của React là có thể bởi vì React xử lý việc truyền bá các sự kiện tổng hợp trong nội bộ.

Làm việc với JSFiddle với các bản sửa lỗi từ bên dưới.

React Stop Propagation trên jQuery Event

Sử dụng Event.stopImmediatePropagationđể ngăn chặn các trình nghe khác (jQuery trong trường hợp này) của bạn trên thư mục gốc được gọi. Nó được hỗ trợ trong IE9 + và các trình duyệt hiện đại.

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

• Hãy cẩn thận: Người nghe được gọi theo thứ tự mà họ bị ràng buộc. Phản ứng phải được khởi tạo trước khi mã khác (jQuery ở đây) để làm việc này.

jQuery Stop Propagation on React Event

Mã jQuery của bạn cũng sử dụng phân quyền sự kiện, điều đó có nghĩa là việc gọi stopPropagationtrình xử lý không dừng lại; sự kiện đã được truyền bá documentvà người nghe của React sẽ được kích hoạt.

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

Để ngăn chặn sự lan truyền vượt ra ngoài phần tử, người nghe phải bị ràng buộc với chính phần tử đó:

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

Chỉnh sửa (2016/01/14): Làm rõ rằng ủy nhiệm chỉ nhất thiết được sử dụng cho các sự kiện bong bóng. Để biết thêm chi tiết về xử lý sự kiện, nguồn của React có các nhận xét mô tả: ReactBrowserEventEuctor.js .

Đáng lưu ý (từ vấn đề này ) rằng nếu bạn đang đính kèm các sự kiện document, e.stopPropagation()sẽ không có ích. Như một giải pháp window.addEventListener()thay thế , bạn có thể sử dụng thay vì document.addEventListener, sau đó event.stopPropagation()sẽ ngăn sự kiện truyền sang cửa sổ.

Đó vẫn là một khoảnh khắc xen kẽ:

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

Sử dụng cấu trúc này, nếu chức năng của bạn được bao bọc bởi thẻ

Tôi đã có thể giải quyết điều này bằng cách thêm phần sau vào thành phần của mình:

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

Tôi đã gặp vấn đề này ngày hôm qua, vì vậy tôi đã tạo ra một giải pháp thân thiện với React.

Kiểm tra phản ứng-bản địa-người nghe . Nó hoạt động rất tốt cho đến nay. Phản hồi đánh giá cao.

Từ tài liệu React : Các trình xử lý sự kiện bên dưới được kích hoạt bởi một sự kiện trong giai đoạn sủi bọt . Để đăng ký một trình xử lý sự kiện cho giai đoạn chụp, hãy thêm Capture . (nhấn mạnh thêm)

Nếu bạn có một trình lắng nghe sự kiện nhấp trong mã React của bạn và bạn không muốn nó nổi lên, tôi nghĩ những gì bạn muốn làm là sử dụng onClickCapturethay vì onClick. Sau đó, bạn sẽ chuyển sự kiện cho người xử lý và làm event.nativeEvent.stopPropagation()để giữ cho sự kiện bản địa không bị sủi bọt cho người nghe sự kiện vanilla JS (hoặc bất cứ điều gì không phản ứng).

Cập nhật: Bây giờ bạn có thể <Elem onClick={ proxy => proxy.stopPropagation() } />

Một cách giải quyết nhanh chóng là sử dụng window.addEventListenerthay vì document.addEventListener.