জাভাস্ক্রিপ্ট: ইভেন্ট শ্রোতাদের সরান

Question

আমি শ্রোতার সংজ্ঞার ভিতরে কোনও ইভেন্ট শ্রোতাকে সরিয়ে দেওয়ার চেষ্টা করছি:

canvas.addEventListener('click', function(event) {
    click++;
    if(click == 50) {
        // remove this event listener here!
    }
// More code here ...

আমি এটা কিভাবে করতে পারি? এই = ইভেন্ট ... আপনাকে ধন্যবাদ

Comments

তুচ্ছ তবে ভবিষ্যতের রেফারেন্সগুলি if(click == 50) {হওয়া উচিত if( click === 50 )বা if( click >= 50 )- এগুলি আউটপুট পরিবর্তন করবে না, তবে অসম্পূর্ণতার কারণে এই চেকগুলি আরও অর্থবোধ করে।

— rlemon

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

— জেসনএক্সএ

Answer 1

আপনার নামযুক্ত ফাংশন ব্যবহার করা দরকার।

এছাড়াও, clickভেরিয়েবলের বর্ধিতকরণের জন্য হ্যান্ডলারের বাইরে থাকা দরকার।

var click_count = 0;

function myClick(event) {
    click_count++;
    if(click_count == 50) {
       // to remove
       canvas.removeEventListener('click', myClick);
    }
}

// to add
canvas.addEventListener('click', myClick);

---

সম্পাদনা: আপনি click_counterএই মত চলক প্রায় বন্ধ করতে পারে :

var myClick = (function( click_count ) {
    var handler = function(event) {
        click_count++;
        if(click_count == 50) {
           // to remove
           canvas.removeEventListener('click', handler);
        }
    };
    return handler;
})( 0 );

// to add
canvas.addEventListener('click', myClick);

এইভাবে আপনি বেশ কয়েকটি উপাদান জুড়ে কাউন্টারকে বাড়িয়ে দিতে পারেন।

---

আপনি যদি তা না চান এবং প্রত্যেকের নিজস্ব নিজস্ব কাউন্টার থাকতে চান তবে এটি করুন:

var myClick = function( click_count ) {
    var handler = function(event) {
        click_count++;
        if(click_count == 50) {
           // to remove
           canvas.removeEventListener('click', handler);
        }
    };
    return handler;
};

// to add
canvas.addEventListener('click', myClick( 0 ));

সম্পাদনা: হ্যান্ডলারটি শেষ দুটি সংস্করণে ফিরে আসার নামটি ভুলে গিয়েছিলাম। সংশোধন করা হয়েছে।

Comments

+1 - আমি এটিকে একটি ঝাঁকুনিতে পরিণত করেছি এবং এটি কার্যকর হয়নি। তবে এটি ছিল কারণ আমার পঞ্চাশবার ক্লিক করা দরকার ছিল :) আমি কী নির্বোধ। সরলীকৃত উদাহরণ এখানে: jsfiddle.net/karim79/aZNqA

— karim79

@ করিম :৯: আমি আশা করি আমি বলতে পারি যে এর আগে আমি এর আগে কখনও কিছু করিনি। : ও) জেএসফিডালের জন্য ধন্যবাদ।

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

+1 তৃতীয় বিকল্পটি আমার পক্ষে কাজ করেছিল। বৈধতা সাফ করার জন্য একটি ইনপুট ক্ষেত্রে একটি মূল ইভেন্ট নিযুক্ত করা। একটি ধন্যবাদ ধন্যবাদ

— Gurnard

আপভোট, তৃতীয় বিকল্পটি এখানে জেএস বাইন্ডিং / আনবাইন্ডিং বোঝার গুরুত্বপূর্ণ অংশ

— SW4

হবে myClick = function(event){...}একটি নামাঙ্কিত ফাংশন খুব বিবেচনা করা যেতে?

— ড্যানিয়েল মুলার

Answer 2

   canvas.addEventListener('click', function(event) {
      click++;
      if(click == 50) {
          this.removeEventListener('click',arguments.callee,false);
      }

এটা করা উচিত।

Comments

এই দুর্দান্ত! উপর ডক arguments.callee: আগ্রহী ব্যক্তিদের জন্য developer.mozilla.org/en/JavaScript/Reference/...

— Ender

ধন্যবাদ, এটি অনেক সাহায্য করেছে।

— জন হে

দুর্ভাগ্যক্রমে এটি ECMAScript 5 (2009) বা তার পরে এমডিএন লিঙ্ক থেকে কাজ করে না: "ECMAScript এর 5 তম সংস্করণ (ES5) arguments.callee()কঠোর মোডে ব্যবহার করতে নিষেধ করেছে arguments.callee()function ফাংশন এক্সপ্রেশনকে একটি নাম দিয়ে ব্যবহার করা বা কোনও ফাংশন ঘোষণার ব্যবহার ব্যবহার করা এড়ানো উচিত নয় যেখানে কোনও ক্রিয়াকলাপ নিজেই কল করতে পারে। " (যদিও এর callee()পরিবর্তে এটি ব্যবহার করা হচ্ছে callee, এটি এখনও সরানো হয়েছে, বু!)

— দাই

Answer 3

আপনি একটি নামযুক্ত ফাংশন এক্সপ্রেশন ব্যবহার করতে পারেন (এই ক্ষেত্রে ফাংশনটির নাম দেওয়া হয়েছে abc), তেমন :

let click = 0;
canvas.addEventListener('click', function abc(event) {
    click++;
    if (click >= 50) {
        // remove event listener function `abc`
        canvas.removeEventListener('click', abc);
    }
    // More code here ...
}

দ্রুত এবং নোংরা কাজের উদাহরণ: http://jsfiddle.net/8qvdmLz5/2/ ।

নামযুক্ত ফাংশন এক্সপ্রেশন সম্পর্কে আরও তথ্য: http://kangax.github.io/nfe/ ।

Comments

চালাক। সেই বিরল ক্ষেত্রে একটি যেখানে এনএফই কার্যকর। ধন্যবাদ।

— ড্যানম্যান

Answer 4

element.querySelector('.addDoor').onEvent('click', function (e) { });
element.querySelector('.addDoor').removeListeners();


HTMLElement.prototype.onEvent = function (eventType, callBack, useCapture) {
this.addEventListener(eventType, callBack, useCapture);
if (!this.myListeners) {
    this.myListeners = [];
};
this.myListeners.push({ eType: eventType, callBack: callBack });
return this;
};


HTMLElement.prototype.removeListeners = function () {
if (this.myListeners) {
    for (var i = 0; i < this.myListeners.length; i++) {
        this.removeEventListener(this.myListeners[i].eType, this.myListeners[i].callBack);
    };
   delete this.myListeners;
};
};

Answer 5

যদি @ সাইবারনেটের সমাধানটি কাজ না করে, তবে এটির নিজস্ব কার্যক্রমে ট্রিগারটি বন্ধ করে দেওয়ার চেষ্টা করুন যাতে আপনি এটি উল্লেখ করতে পারেন।

clickHandler = function(event){
  if (click++ == 49)
    canvas.removeEventListener('click',clickHandler);
}
canvas.addEventListener('click',clickHandler);

Answer 6

যদি কেউ jquery ব্যবহার করে তবে তিনি এটি এটি করতে পারেন:

var click_count = 0;
$( "canvas" ).bind( "click", function( event ) {
    //do whatever you want
    click_count++;
    if ( click_count == 50 ) {
        //remove the event
        $( this ).unbind( event );
    }
});

আশা করি এটি কারও সাহায্য করতে পারে। নোট করুন যে @ ইউজার 113716 এর দেওয়া উত্তরটি সুন্দরভাবে কাজ করেছে :)

Answer 7

আমি মনে করি আপনার আগে সময়ের আগে হ্যান্ডলার ফাংশনটি সংজ্ঞায়িত করতে হতে পারে:

var myHandler = function(event) {
    click++; 
    if(click == 50) { 
        this.removeEventListener('click', myHandler);
    } 
}
canvas.addEventListener('click', myHandler);

এটি আপনাকে নিজের মধ্যে থেকেই নাম দ্বারা হ্যান্ডলারটি সরাতে দেবে।

Answer 8

এটি চেষ্টা করুন, এটি আমার পক্ষে কাজ করেছিল।

<button id="btn">Click</button>
<script>
 console.log(btn)
 let f;
 btn.addEventListener('click', f=function(event) {
 console.log('Click')
 console.log(f)
 this.removeEventListener('click',f)
 console.log('Event removed')
})  
</script>