jQuery 1 ডিভিটি বাদে পৃষ্ঠাটির যে কোনও জায়গায় ক্লিক করুন


89

আমি যখন একটি পৃষ্ঠা ( id=menu_content) বাদে আমার পৃষ্ঠায় যে কোনও জায়গায় ক্লিক করি তখন কীভাবে কোনও ফাংশন ট্রিগার করতে পারি ?

উত্তর:


145

আপনি নথির clickউপর আবেদন করতে পারেন এবং ইভেন্টটি আইডির সাথে ডিভ দ্বারা উত্পাদিত হলে প্রক্রিয়াজাতকরণ bodyবাতিল করতে পারেন , এটি ইভেন্টটিকে একক উপাদানের সাথে আবদ্ধ করবে এবং প্রতিটি উপাদানের সাথে বাইন্ডিং সাশ্রয় ব্যতীতclickclickmenu_contentclickmenu_content

$('body').click(function(evt){    
       if(evt.target.id == "menu_content")
          return;
       //For descendants of menu_content being clicked, remove this check if you do not want to put constraint on descendants.
       if($(evt.target).closest('#menu_content').length)
          return;             

      //Do processing of click event here for every element except with id menu_content

});

4
ডিআইভির বংশধর শিশুদের সম্পর্কে কী?
আইকেমি

4
আইডি মেনু_কন্টেন্টের সাথে যেমন (has (evt.target)। ক্লোজস্ট ('# মেনু_কন্টেন্ট')। দৈর্ঘ্য) পুনরায় সংঘটিত হয়েছে এমন ইভেন্টের উত্সের চেক করতে আমরা সবচেয়ে কাছের ব্যবহার করতে পারি; আমার আপডেট হওয়া উত্তরটি পরীক্ষা করুন।
আদিল

যেহেতু closestবর্তমান উপাদানটি দিয়ে শুরু হয়, এটি ক্লিক করা menu_contentপাশাপাশি বংশধরদের উপরও ক্লিক করে। আমি মনে করি দ্বিতীয়টি ifআপনার যা প্রয়োজন তা হল।
গুদেডে

50

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

$(document).click(function(e){

    // Check if click was triggered on or within #menu_content
    if( $(e.target).closest("#menu_content").length > 0 ) {
        return false;
    }

    // Otherwise
    // trigger your click function
});

43

এটা চেষ্টা কর

 $('html').click(function() {
 //your stuf
 });

 $('#menucontainer').click(function(event){
     event.stopPropagation();
 });

আপনি বাইরের ইভেন্টগুলিও ব্যবহার করতে পারেন


4
এই কাজটি, তবে ইভেন্ট.স্টপপ্রপাগেশন () ব্যবহার করে পিতামাতার মধ্যে থাকা অন্য জেএসের উপর প্রভাব ফেলতে পারে।
এড স্মিথ

9

আমি জানি যে এই প্রশ্নের উত্তর দেওয়া হয়েছে, এবং সমস্ত উত্তর সুন্দর। তবে আমি এই প্রশ্নে আমার দুটি সেন্ট যুক্ত করতে চেয়েছিলাম যাদের সমস্যাগুলির সমান (তবে ঠিক একই নয়)।

আরও সাধারণ উপায়ে আমরা এরকম কিছু করতে পারি:

$('body').click(function(evt){    
    if(!$(evt.target).is('#menu_content')) {
        //event handling code
    }
});

এইভাবে আমরা কেবল আইডি সহ উপাদান ছাড়া অন্য কিছু দ্বারা চালিত ইভেন্টগুলিকেই হ্যান্ডেল করতে পারি না menu_contentবরং সিএসএস নির্বাচক ব্যবহার করে যে উপাদান নির্বাচন করতে পারি তা বাদ দিয়ে যে কোনও উপাদান দ্বারা বরখাস্ত করা ইভেন্টগুলিও আমরা পরিচালনা করতে পারি।

উদাহরণস্বরূপ নীচের কোড স্নিপেটে আমি <li>আইডি সহ ডিভ উপাদানটির বংশধর ছাড়া সমস্ত উপাদান ব্যতীত যে কোনও উপাদান দ্বারা ঘটনাগুলি সরিয়ে আছি myNavbar

$('body').click(function(evt){    
    if(!$(evt.target).is('div#myNavbar li')) {
        //event handling code
    }
});

4
আমি কেবল বলতে চেয়েছিলাম যে এই পদ্ধতিটি আমার পক্ষে ঠিক কাজ করেছে, আমি .is () এবং এটিও ব্যবহার করেছি। ক্লাসেস্ট () সিএসএস নির্বাচকের সাথে নেই যার আইডি ছিল না তবে কিছু শ্রেণি আপনাকে ধন্যবাদ জানায়
পুনরায়

7

এখানে আমি কি করেছি। আমি নিশ্চিত করতে চেয়েছিলাম যে আমি আমার ডেটপিকারে যে কোনও শিশুকে এটি বন্ধ না করে ক্লিক করতে পারি।

$('html').click(function(e){
    if (e.target.id == 'menu_content' || $(e.target).parents('#menu_content').length > 0) {
        // clicked menu content or children
    } else {
        // didnt click menu content
    }
});

আমার আসল কোড:

$('html').click(function(e){
    if (e.target.id != 'datepicker'
        && $(e.target).parents('#datepicker').length == 0
        && !$(e.target).hasClass('datepicker')
    ) {
        $('#datepicker').remove();
    }
});

বাচ্চাদের ক্লাস ও ক্লাস সহ দুর্দান্ত সংস্করণটি উত্তোলন করা উচিত!
rththus
আমাদের সাইট ব্যবহার করে, আপনি স্বীকার করেছেন যে আপনি আমাদের কুকি নীতি এবং গোপনীয়তা নীতিটি পড়েছেন এবং বুঝতে পেরেছেন ।
Licensed under cc by-sa 3.0 with attribution required.