আমি ক্লিকের ইভেন্টে উপাদানটির বাইরে কোথাও কোনও উপাদানকে কীভাবে আড়াল করব?

121

পৃষ্ঠার যে কোনও জায়গায় ক্লিক করার পরে দৃশ্যমান উপাদানগুলি লুকানোর এটি সঠিক উপায় কিনা তা আমি জানতে চাই।

$(document).click(function (event) {            
    $('#myDIV:visible').hide();
});

উপাদানটির সীমানার মধ্যে যখন কোনও ক্লিক ইভেন্ট হয় তখন উপাদান (ডিভ, স্প্যান ইত্যাদি) অদৃশ্য হওয়া উচিত নয়।

jquery events event-bubbling

— Franek
সূত্র

204

যদি আমি বুঝতে পারি, আপনি যখন ডিভিটি বাদে অন্য কোথাও ক্লিক করেন তখন আপনি একটি ডিআইভি লুকিয়ে রাখতে চান, এবং যদি আপনি ডিভের ওপরে ক্লিক করেন, তবে এটি বন্ধ হওয়া উচিত নয়। আপনি এই কোড দিয়ে এটি করতে পারেন:

$(document).click(function() {
    alert("me");
});
$(".myDiv").click(function(e) {
    e.stopPropagation(); // This is the preferred method.
    return false;        // This should not be used unless you do not want
                         // any click events registering inside the div
});

এটি ক্লিকটি পুরো পৃষ্ঠায় আবদ্ধ করে, তবে আপনি যদি প্রশ্নযুক্ত ডিভিতে ক্লিক করেন তবে এটি ক্লিক ইভেন্টটি বাতিল করে দেবে।

— জেরেমি বি।
সূত্র

1

এটি ঠিকঠাক কাজ করে .. তবে যখন আমি বোতামটি ক্লিক করি যা পপআপ কল করে, তখন পপআপ আসে এবং তারপরে আবার ততক্ষণে অদৃশ্য হয়ে যায়। ডকুমেন্টটি একবারে দুটি পদক্ষেপ নিচ্ছে বলে এর জন্য কী করবেন। বডি ক্লিক করতে পপআপ কল করতে এবং বডি ক্লিকে পপআপ নিস্তেজ করতে

— বীর শ্রীবাস্তব

@ ভিয়ারশ্রীবাস্তব এখানেও ঘটে। e.stopPropagation (); সমস্ত ক্লিক হ্যান্ডলারগুলি বন্ধ করবে

— মার্চকে ব্রুনডড

যদি আপনার ভিতরে উপাদানগুলির মধ্যে অন্যান্য উপাদান থাকে তবে এটি সাফারিটিতে কাজ করবে না .myDiv। উদাহরণস্বরূপ, যদি আপনার ভিতরে ড্রপডাউন থাকে তবে .myDiv। আপনি যখন ক্লিকটি ক্লিক করেন, তখন মনে হবে আপনি বাক্সের বাইরে ক্লিক করছেন।

— কোডজিডি

24

এটা চেষ্টা কর

 $('.myDiv').click(function(e) { //button click class name is myDiv
  e.stopPropagation();
 })

 $(function(){
  $(document).click(function(){  
  $('.myDiv').hide(); //hide the button

  });
});

আমি আইডির পরিবর্তে ক্লাসের নামটি ব্যবহার করি , কারণ এসপিএনটিতে আপনাকে অতিরিক্ত জিনিসগুলির বিষয়ে চিন্তা করতে হবে net নেটটি আইডিতে সংযুক্ত করে

সম্পাদনা- যেহেতু আপনি অন্য একটি টুকরো যুক্ত করেছেন তাই এটি এটির মতো কাজ করবে:

 $('.myDiv').click(function() { //button click class name is myDiv
  e.stopPropagation();
 })

 $(function(){
  $('.openDiv').click(function() {
  $('.myDiv').show(); 

  });
  $(document).click(function(){  
  $('.myDiv').hide(); //hide the button

  });
});

— TStamper
সূত্র

22

JQuery 1.7 হিসাবে ইভেন্টগুলি পরিচালনা করার জন্য একটি নতুন উপায় রয়েছে। আমি ভেবেছিলাম আমি কীভাবে এই "নতুন" উপায়ে কাজ করতে যেতে পারি তা প্রদর্শনের জন্য এখানে উত্তর দেব। যদি আপনার না থাকে তবে আমি আপনাকে "অন" পদ্ধতির জন্য jQuery ডক্স পড়ার প্রস্তাব দিই ।

var handler = function(event){
  // if the target is a descendent of container do nothing
  if($(event.target).is(".container, .container *")) return;

  // remove event handler from document
  $(document).off("click", handler);

  // dostuff
}

$(document).on("click", handler);

এখানে আমরা jQuery এর নির্বাচকদের অপব্যবহার করছি এবং ঘটনা বুদবুদ। নোট করুন যে আমি নিশ্চিত হয়েছি যে আমি পরে ইভেন্ট হ্যান্ডলারটি পরিষ্কার করেছি। আপনি এই আচরণটি স্বয়ংক্রিয় করতে পারেন $('.container').one( দেখুন: দস্তাবেজগুলি ) তবে আমাদের হ্যান্ডলারের মধ্যে শর্তসাপেক্ষ করতে হবে যা এখানে প্রযোজ্য নয়।

— বেন টেলর
সূত্র

13

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

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
</head>
<body>
    <a id="link" href="#">show box</a>
    <div id="box" style="background: #eee; display: none">
        <p>a paragraph of text</p>
        <input type="file"  />
    </div>

    <script src="jquery.js" type="text/javascript"></script>

    <script type="text/javascript">
        var box = $('#box');
        var link = $('#link');

        link.click(function() {
            box.show(); return false;
        });

        $(document).click(function() {
            box.hide();
        });

        box.click(function(e) {
            e.stopPropagation();
        });

    </script>
</body>
</html>

6

ধন্যবাদ, টমাস আমি জেএসে নতুন এবং আমি আমার সমস্যার সমাধানের জন্য উন্মাদ হয়ে দেখছি। আপনার সাহায্য।

আমি লগইন-বাক্স তৈরি করতে jquery ব্যবহার করেছি যা নীচে স্লাইড হয়। সেরা ব্যবহারকারীর অভিজ্ঞতার জন্য আমি ব্যবহারকারীকে কোথাও কোথাও ক্লিক করলে বাক্সটি অদৃশ্য হয়ে যায় des এটি প্রায় চার ঘন্টা স্থির করে আমি কিছুটা বিব্রত বোধ করছি। তবে ওহে আমি জেএসে নতুন আছি।

হতে পারে আমার কোডটি কাউকে সাহায্য করতে পারে:

<body>
<button class="login">Logg inn</button>
<script type="text/javascript">

    $("button.login").click(function () {
        if ($("div#box:first").is(":hidden")) {
                $("div#box").slideDown("slow");} 
            else {
                $("div#box").slideUp("slow");
                }
    });
    </script>
<div id="box">Lots of login content</div>

<script type="text/javascript">
    var box = $('#box');
    var login = $('.login');

    login.click(function() {
        box.show(); return false;
    });

    $(document).click(function() {
        box.hide();
    });

    box.click(function(e) {
        e.stopPropagation();
    });

</script>

</body>

— রূটি
সূত্র

5

আপনি যা করতে পারেন তা হ'ল:

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

  var container = $("div");

   if (!container.is(e.target) && container.has(e.target).length === 0)
  {
 container.fadeOut('slow');

   }

});

যদি আপনার লক্ষ্যটি ডিভ না হয় তবে দৈর্ঘ্যটি শূন্যের সমান হয় তা পরীক্ষা করে ডিভটি লুকান।

— সন্দীপ পাল
সূত্র

5

আমি নীচে করেছি। ভাগ করে নেওয়ার কথা ভেবেছিল যাতে অন্য কেউও উপকৃত হতে পারে।

$("div#newButtonDiv").click(function(){
    $(this).find("ul.sub-menu").css({"display":"block"});

    $(this).click(function(event){
        event.stopPropagation();
        $("html").click(function(){
            $(this).find("ul.sub-menu").css({"display":"none"});
        }
    });
});

আমি যদি এই বিষয়ে কাউকে সহায়তা করতে পারি তবে আমাকে জানান।

— foxybagga
সূত্র

দুর্দান্ত কোড এবং div#newButtonDivক্লিক না করা হলে কার্যকর করা হয় না। আমি আপনাকে .click()4 নং লাইনে দ্বিতীয়টি সরিয়ে দেওয়ার পরামর্শ দিচ্ছি (যদি আপনি এটি করেন, বন্ধ বন্ধনী, বন্ধনী এবং অর্ধ-কোলন - লাইন 9 সরিয়ে ফেলতে ভুলবেন না)।

— আউল্লাহ

4

এটা চেষ্টা কর:

 $(document).mouseup(function (e) {
    var div = $("#yourdivid");
    if (!div.is(e.target) && div.has(e.target).length === 0) 
    {
       div.hide();
     }
    });

— নলন মধেশ্বরন
সূত্র

3

কন্টেইনার ডিভ লুকানোর আর একটি উপায় যখন বাচ্চাদের নয় এমন উপাদানগুলিতে ক্লিক হয়;

$(document).on('click', function(e) {
    if(!$.contains($('.yourContainer').get(0), e.target)) {
        $('.yourContainer').hide();
    }
});

— রেনাতো গামা
সূত্র

3

  $(document).on('click', function(e) { // Hides the div by clicking any where in the screen
        if ( $(e.target).closest('#suggest_input').length ) {
            $(".suggest_div").show();
        }else if ( ! $(e.target).closest('.suggest_container').length ) {
            $('.suggest_div').hide();
        }
    });

এখানে # সাজিস্ট_ইনপুট ইন হ'ল পাঠ্যবক্সের নাম এবং .সুজেস্ট_কন্টেইনারটি হ'ল উল শ্রেণীর নাম এবং auto

এই কোডটি স্ক্রিনের যে কোনও জায়গায় ক্লিক করে ডিভ উপাদানগুলি আড়াল করার জন্য। প্রতিটি কাজ করার আগে দয়া করে কোডটি বুঝুন এবং এটি অনুলিপি করুন ...

— শায়খ আরবাজ
সূত্র

2

এটি চেষ্টা করুন, এটি আমার জন্য নিখুঁত কাজ করছে।

$(document).mouseup(function (e)
{
    var searchcontainer = $("#search_container");

    if (!searchcontainer.is(e.target) // if the target of the click isn't the container...
        && searchcontainer.has(e.target).length === 0) // ... nor a descendant of the container
    {
        searchcontainer.hide();
    }
});

— হাসান সরদার
সূত্র

2

$('html').click(function() {
//Hide the menus if it is visible
});

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

তবে আপনার এই বিষয়গুলিও মনে রাখা উচিত। http://css-tricks.com/dangers-stopping-event-propagation/

— মুহাম্মদ তাহির
সূত্র

2

সন্দীপ পালের উত্তরের উপর ভিত্তি করে এখানে একটি কার্যকারী সিএসএস / ছোট জেএস সমাধান রয়েছে:

$(document).click(function (e)
{
  if (!$("#noticeMenu").is(e.target) && $("#noticeMenu").has(e.target).length == 0)
  {
   $("#menu-toggle3").prop('checked', false);
  }
});

চেকবক্সটি ক্লিক করে এবং তারপরে মেনুটির বাইরে চেষ্টা করে দেখুন:

https://jsfiddle.net/qo90txr8/

— Bjoerg
সূত্র

1

এটি কাজ করে না - আপনি যখন এর অভ্যন্তরে ক্লিক করেন তখন এটি .MYDIV লুকিয়ে রাখে।

$('.openDiv').click(function(e) {
$('.myDiv').show(); 
e.stopPropagation();
})

$(document).click(function(){  
$('.myDiv').hide(); 

});

});

<a class="openDiv">DISPLAY DIV</a>

<div class="myDiv">HIDE DIV</div>

— Franek
সূত্র

সুতরাং আপনি লিঙ্কটি স্থাপন করার সময় ডিভটি প্রদর্শন করতে চান, তারপরে সেই e.stopPropa .. সেখান থেকে নিয়ে যান এবং আমার বিকল্পটি অনুসরণ করুন

— টিস্টম্পার

1

উপরের পরামর্শগুলিতে মাত্র 2 টি ছোট উন্নতি:

ডকুমেন্টটি আনবাইন্ড করুন। কাজ হয়ে গেলে ক্লিক করুন

এটির একটি ক্লিক ধরে ধরে ইভেন্টটি এই ঘটায় এমন প্রচার শুরু করুন stop

jQuery(thelink).click(function(e){
    jQuery(thepop).show();

    // bind the hide controls
    var jpop=jQuery(thepop);
    jQuery(document).bind("click.hidethepop", function() {
            jpop.hide();
            // unbind the hide controls
            jQuery(document).unbind("click.hidethepop");
    });
    // dont close thepop when you click on thepop
    jQuery(thepop).click(function(e) {
        e.stopPropagation();
    });
    // and dont close thepop now 
    e.stopPropagation();
});

— commonpike
সূত্র

1

$(document).ready(function(){

$("button").click(function(){
   
       
        $(".div3").toggle(1000);
    });
   $("body").click(function(event) {
   if($(event.target).attr('class') != '1' && $(event.target).attr('class') != 'div3'){
       $(".div3").hide(1000);}
    }); 
   
    
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script>
<button class="1">Click to fade in boxes</button><br><br>

<body style="width:100%;height:200px;background-color:pink;">
<div class="div3" style="width:80px;height:80px;display:none;background-color:blue;"></div><body>

স্নিপেট প্রসারিত করুন

— এহসান খান
সূত্র

0

$( "element" ).focusout(function() {
    //your code on element
})

— জাফর চৌপান
সূত্র

5

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

— শ্রী

-1

$(document).mouseup(function (e)
{
    var mydiv = $('div#mydiv');
    if (!mydiv.is(e.target) && mydiv.has(e.target).length === 0){
       search.slideUp();
    }
});

— মোহাম্মদ গিটিপাশন্দ
সূত্র

-1

সরল সমাধান: নির্দিষ্ট ইভেন্টের বাইরে যে কোনও জায়গায় ক্লিক ইভেন্টে একটি উপাদান লুকান।

$(document).on('click', function () {
                $('.element').hide();
            });
            //element will not Hide on click some specific control inside document
            $('.control-1').on('click', function (e) {
                e.stopPropagation();
            });

— সুপার মডেল
সূত্র