ReactJS সিনথেটিক এভেন্ট স্টপপ্রোগেশন () কেবল প্রতিক্রিয়া ইভেন্টগুলির সাথে কাজ করে?

126

আমি লিগ্যাসি কোডে জ্যাকুয়ারির সাথে সংযুক্ত একটি ক্লিক ইভেন্টটি বুবলিং থেকে বিরত রাখতে এবং ক্লিক ইভেন্টকে ট্রিগার করতে একটি রিএক্টজেএস উপাদানটির মধ্যে ইভেন্ট.স্টপপ্রোপেশন () ব্যবহার করার চেষ্টা করছি, তবে মনে হয় রিএ্যাক্টের স্টপপ্রোগেশন () কেবল ইভেন্টগুলিতে প্রচার বন্ধ করে দেয় প্রতিক্রিয়াতেও সংযুক্ত থাকে এবং জিক্যুরির স্টপপ্রোগেশন () রিঅ্যাক্টের সাথে সংযুক্ত ইভেন্টগুলিতে প্রচার বন্ধ করে না।

এই ইভেন্টগুলি জুড়ে স্টপপ্রেশন () কাজ করার কোনও উপায় আছে কি? আমি এই আচরণগুলি প্রদর্শনের জন্য একটি সাধারণ জেএসফিডাল লিখেছি :

/** @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();
    });
});

javascript jquery reactjs

— lofiinterstate
সূত্র

9

প্রতিক্রিয়াটির আসল ইভেন্ট শ্রোতাও নথির মূলে রয়েছে, ক্লিক ইভেন্টটি ইতিমধ্যে মূলটিতে বুদবুদ হয়েছে। আপনি event.nativeEvent.stopImmediatePropagationঅন্য ইভেন্ট শ্রোতাদের গুলি চালানো থেকে বিরত রাখতে ব্যবহার করতে পারেন তবে মৃত্যুদণ্ড কার্যকর করার গ্যারান্টি নেই।

— রস অ্যালেন

3

প্রকৃতপক্ষে, stopImmediatePropagationদাবি শ্রোতাদের যেভাবে আবদ্ধ ছিল সেভাবে ডাকা হবে। আপনার প্রতিক্রিয়া জেএস যদি আপনার জিক্যুরির আগে শুরু করা হয় (যেমন এটি আপনার ফিডে রয়েছে), তাত্ক্ষণিক প্রচার বন্ধ করা কার্যকর হবে।

— রস অ্যালেন

জিকুয়ের শ্রোতাদের ডেকে আটকানো প্রতিক্রিয়া ব্যক্ত করুন : jsfiddle.net/7LEDT/5 jQuery এর পক্ষে প্রতিক্রিয়া ডেকে আটকানো সম্ভব নয় কারণ jQuery শ্রোতারা পরে আপনার মূর্ছনায় আবদ্ধ।

— রস অ্যালেন

একটি বিকল্প হ'ল আপনার নিজের jQuery ইভেন্ট হ্যান্ডলারটি সেট আপ করা componentDidMountহবে, তবে এটি অপ্রত্যাশিত উপায়ে অন্যান্য প্রতিক্রিয়া ইভেন্ট হ্যান্ডলারের সাথে হস্তক্ষেপ করতে পারে।

— ডগলাস

আমি বুঝতে পেরেছি যে দ্বিতীয়টি .stop-propagationঅগত্যা কাজ করবে না। আপনার উদাহরণ ইভেন্ট প্রতিনিধি ব্যবহার করে তবে উপাদানটিতে প্রচার বন্ধ করার চেষ্টা করছে। শ্রোতা উপাদান নিজেই বাধ্য করা প্রয়োজন: $('.stop-propagation').on('click', function(e) { e.stopPropagation(); });। আপনি যেভাবে

— রস অ্যালেন

165

প্রতিক্রিয়া documentএমন ঘটনাগুলির জন্য একক ইভেন্ট শ্রোতার সাথে ইভেন্টের প্রতিনিধিদের ব্যবহার করে যা বুদবুদ, উদাহরণস্বরূপ 'ক্লিক' এর মতো, যার অর্থ প্রচার বন্ধ করা সম্ভব নয়; বাস্তব ইভেন্টটি ইতিমধ্যে আপনি প্রতিক্রিয়াতে এর সাথে ইন্টারঅ্যাক্ট করার মাধ্যমে প্রচার করেছে। stopPropagationরিঅ্যাক্টের সিন্থেটিক ইভেন্টটি সম্ভব কারণ প্রতিক্রিয়াটি সিন্থেটিক ইভেন্টগুলির অভ্যন্তরীণ প্রসারণ পরিচালনা করে।

নীচে থেকে ফিক্সগুলি নিয়ে জেএসফিডলকে কাজ করা ।

JQuery ইভেন্টে প্রচার বন্ধ করুন Re

Event.stopImmediatePropagationআপনার অন্য (এই ক্ষেত্রে jQuery) শ্রোতাদের ডেকে আটকানোর জন্য ব্যবহার করুন । এটি IE9 + এবং আধুনিক ব্রাউজারগুলিতে সমর্থিত।

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

ক্যাভেট: শ্রোতাদের যে ক্রমে আবদ্ধ করা হচ্ছে সেটিকে ডাকা হয়। এটি কাজ করার জন্য অন্যান্য কোডের আগে (jQuery এখানে) প্রতিক্রিয়া শুরু করতে হবে।

প্রতিক্রিয়া ইভেন্ট উপর jQuery স্টপ প্রচার

আপনার jQuery কোড এছাড়াও ইভেন্ট প্রতিনিধি ব্যবহার করে, যার অর্থ stopPropagationহ্যান্ডলারে কল করা কিছুতেই থামছে না; ইভেন্টটি ইতিমধ্যে প্রচারিত হয়েছে document, এবং প্রতিক্রিয়াটির শ্রোতা ট্রিগার হবে।

// 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): স্পষ্ট করে বলেছে যে প্রতিনিধিদলগুলি কেবলমাত্র এমন ঘটনাগুলির জন্য ব্যবহৃত হয় যা বুদবুদ। ইভেন্ট পরিচালনার বিষয়ে আরও তথ্যের জন্য, প্রতিক্রিয়াটির উত্সটিতে বর্ণনামূলক মন্তব্য রয়েছে: রিঅ্যাক্টব্রোজারএভেন্টিমেটার.জেএস ।

— রস অ্যালেন
সূত্র

@ এসোরেলেন: স্পষ্টকরণ: প্রতিক্রিয়া কি তার ইভেন্ট শ্রোতার উপর বাঁধা দেয় document, বা মূল প্রতিক্রিয়া উপাদানকে? লিঙ্ক পৃষ্ঠা ঠিক বলেছেন, যা আমি বলতে চাচ্ছি যে তা গ্রহণ "শীর্ষ পর্যায়ে" নাdocument (কিন্তু আমি চিন্তা করতে পারে না যদি এই এমনকি প্রাসঙ্গিক)।

— ব্যবহারকারী 128216

2

@ ফাইটার জেট যা ইভেন্টের ধরণের উপর নির্ভর করে। যে ইভেন্টগুলি বুদবুদ হয়, তাদের জন্য শীর্ষ স্তরের প্রতিনিধি ব্যবহৃত হয়। বুদবুদ না এমন ইভেন্টগুলির জন্য, প্রতিক্রিয়া অগত্যা বিভিন্ন ডিওএম নোডে শোনায়। একটি আরও বিশদ বিবরণ ReactBrowserEventEmitter.js এ অন্তর্ভুক্ত করা হয়েছে: github.com/facebook/react/blob/…

— রস অ্যালেন

অস্থায়ী ডাউনভোটের জন্য আমার ক্ষমা চাই। আমি এটি একটি বাগ রিপোর্টের জন্য প্রয়োজন এবং আমি এটি একটি

— উর্ধ্বতন

এছাড়াও জিম এর উত্তর, যা বিশ্বব্যাপী ক্লিক শ্রোতা জোড়ার পরামর্শ দেয় খুঁজে বার করো windowপরিবর্তে document: stackoverflow.com/a/52879137/438273

— jsejcksn

13

ওয়ার্থ (থেকে লক্ষ এই সমস্যা ) যে আপনাকে ঘটনা সংযোজনের করছি document, e.stopPropagation()সাহায্যের যাচ্ছে না। কর্মপরিকল্পনা হিসাবে, আপনি এর window.addEventListener()পরিবর্তে ব্যবহার করতে পারেন document.addEventListener, তারপরে event.stopPropagation()উইন্ডোতে প্রচার থেকে ইভেন্ট বন্ধ হবে।

— জিম নীলসেন
সূত্র

আপনাকে অনেক ধন্যবাদ! এটি আমার কাছে ঠিক তাই এবং এই সমাধানটি কাজ করে।

— আনহ ট্রান

10

এটি এখনও একটি আন্তঃআমূর্ত মুহূর্ত:

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

যদি আপনার ফাংশন ট্যাগ দ্বারা মোড়ানো থাকে তবে এই নির্মাণটি ব্যবহার করুন

— রোমান
সূত্র

1

event.nativeEventসঠিক উত্তর; আমি এটির মাধ্যমে ব্যবহার করতে সক্ষম হয়েছি composedPath():event.nativeEvent.composedPath()

— জিমমন্ট

মানে কি wrapped by tag? আপনি একটি উদাহরণ প্রদান করতে পারেন?

— জিমিএলভি

@ জিমিএলভি মানে <div onClick=(firstHandler)> <div onClick=(secHandler)>active text</div> </div>

— রোমান

7

আমি আমার উপাদানটিতে নিম্নলিখিতগুলি যুক্ত করে এটি সমাধান করতে সক্ষম হয়েছি:

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

— senornestor
সূত্র

2

এটি SynteticEvents পুরোপুরি বন্ধ করে দেবে, কারণ প্রতিক্রিয়া ঘটায় এমন ঘটনাগুলির জন্য নথিতে একক ইভেন্ট শ্রোতার সাথে ইভেন্ট প্রতিনিধি ব্যবহার করে।

— ভখতং

5

আমি গতকাল এই সমস্যায় পড়েছি, তাই আমি একটি প্রতিক্রিয়া-বান্ধব সমাধান তৈরি করেছি।

স্থানীয়-শ্রোতার প্রতিক্রিয়া দেখুন । এটি এখন পর্যন্ত খুব ভাল কাজ করছে। প্রতিক্রিয়া প্রশংসা।

— এরিক আর।
সূত্র

5

react-native-listenerfindDomNodeযেগুলি ব্যবহার করা হবে github.com/yannickcr/eslint-plugin-react/issues/…

— বোহদান লিজানেটস

ডাউনভোটেড কারণ উত্তরগুলি বাজারজাত করা বা বাহ্যিক সমাধান সরবরাহের উপযুক্ত স্থান নয় যা সম্পূর্ণ উত্তরের পরিপূরক নয়।

— জিমমন্ট

2

থেকে প্রতিক্রিয়া ডকুমেন্টেশন : নীচের ইভেন্ট হ্যান্ডলার হয় আলোড়ন সৃষ্টি একটি ইভেন্ট দ্বারা সাড়া জাগানো পর্যায়ে । ক্যাপচার পর্বের জন্য ইভেন্ট হ্যান্ডলারটি নিবন্ধিত করতে ক্যাপচার যুক্ত করুন । (সামনে জোর দাও)

আপনার প্রতিক্রিয়া কোডটিতে যদি আপনার ক্লিকের ইভেন্ট শ্রোতা থাকে এবং আপনি এটি বুদবুদ করতে চান না, তবে আমি মনে করি আপনি যা করতে চান তার onClickCaptureপরিবর্তে ব্যবহার করুন onClick। তারপরে আপনি ইভেন্টটি হ্যান্ডলারের কাছে পৌঁছে দেবেন এবং event.nativeEvent.stopPropagation()নেটিভ ইভেন্টটি কোনও ভ্যানিলা জেএস ইভেন্ট শ্রোতার কাছে বুদবুদ থেকে বাঁচানোর জন্য করবেন (বা এমন কোনও কিছু যা প্রতিক্রিয়া দেখায় না)।

— নীল গিরার্ডি
সূত্র

0

আপডেট: আপনি এখন করতে পারেন <Elem onClick={ proxy => proxy.stopPropagation() } />

— এরিক হোডনস্কি
সূত্র

1

@ রসএলেনের উত্তর দেখুন। এটি কোনও পূর্বপুরুষের নেটিভ ডিওএম শ্রোতাদের (যা jQuery ব্যবহার করে) প্রচার ছড়াবে না।

— বেন মোশার

আপনি যদি প্রতিক্রিয়া উপাদান ব্যবহার করছেন তবে এটি সঠিক উপায়। ইভেন্ট হাইজ্যাক করা ভাল ধারণা নয়।

— এরিক হোডনস্কি

অন্য কিছু ব্যর্থ হচ্ছে, কারণ আপনি কিছু অন্য ভুল কাজ করছি

— এরিক Hodonsky

1

আমি সম্মত হই যে যদি আপনার সমস্ত শ্রোতা প্রতিক্রিয়ার মাধ্যমে সংযুক্ত থাকে তবে এটি এখানে প্রশ্ন নয়।

— বেন মোশার

এটাই কেবল আমি ... আমি সর্বদা সঠিকভাবে সঠিক ব্যবহারের জন্য উত্সাহিত করব যার পরিবর্তে এমন কাউকে ভুল পথে পরিচালিত না করা যা ভবিষ্যতে তাদের শোক করতে পারে কারণ তাদের একটি সমস্যার 'সমাধান' রয়েছে।

— এরিক হোডনস্কি

0

একটি দ্রুত কার্যসংক্রান্ত ব্যবহার করছে window.addEventListenerপরিবর্তে document.addEventListener।

— Yuki,
সূত্র