ব্যবহারকারী যখন এর বাইরে ক্লিক করেন তখন একটি ডিআইভি লুকানোর জন্য jQuery ব্যবহার করুন

Question

আমি এই কোডটি ব্যবহার করছি:

$('body').click(function() {
   $('.form_wrapper').hide();
});

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

এবং এই এইচটিএমএল :

<div class="form_wrapper">
   <a class="agree" href="javascript:;">I Agree</a>
   <a class="disagree" href="javascript:;">Disagree</a>
</div>

সমস্যাটি হ'ল আমার ভিতরে লিঙ্ক রয়েছে divএবং ক্লিক করার পরে সেগুলি আর কাজ করে না।

Comments

সরল জাভাস্ক্রিপ্ট ব্যবহার করে আপনি এরকম কিছু চেষ্টা করতে পারেন: jsfiddle.net/aamir/y7mEY

— আমির আফ্রিদি

ব্যবহার করা $('html')বা এর $(document)চেয়ে ভাল হবে$('body')

— অ্যাড্রিয়েন

Answer 1

একই সমস্যা ছিল, এই সহজ সমাধান নিয়ে এসেছিল। এটি এমনকি পুনরাবৃত্তির কাজ করছে:

$(document).mouseup(function(e) 
{
    var container = $("YOUR CONTAINER SELECTOR");

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

Comments

এটি কেবলমাত্র আমার প্রোজেক্টে রেখে দিন, তবে একটি সামান্য সামঞ্জস্যকরণের মাধ্যমে, সমস্তগুলির একবারে লুপ করার জন্য উপাদানগুলির একটি অ্যারে ব্যবহার করে। jsfiddle.net/LCB5W

— টমাস

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

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

— লোনিক্স

$("YOUR CONTAINER SELECTOR").unbind( 'click', clickDocument );ঠিক পাশেই ব্যবহার করার কথা মনে আছে .hide()। সুতরাং documentক্লিকের জন্য শুনতে থাকবেন না।

— brasofilo

সেরা অনুশীলনের জন্য আমি ফাংশনটিতে লিখেছিলাম $(document).on("mouseup.hideDocClick", function () { ... });যা কন্টেইনারটি খোলায় এবং $(document).off('.hideDocClick');লুকানো ফাংশনে। নেমস্পেসগুলি ব্যবহার করে আমি mouseupনথির সাথে সংযুক্ত অন্যান্য সম্ভাব্য শ্রোতাদের সরিয়ে দিচ্ছি না ।

— ক্যাম্পস জোস

Answer 2

আপনি আরও ভাল কিছু এই সঙ্গে যেতে চাই:

var mouse_is_inside = false;

$(document).ready(function()
{
    $('.form_content').hover(function(){ 
        mouse_is_inside=true; 
    }, function(){ 
        mouse_is_inside=false; 
    });

    $("body").mouseup(function(){ 
        if(! mouse_is_inside) $('.form_wrapper').hide();
    });
});

Comments

কী বুদ্ধিমান! এই কৌশলটি কি আদর্শ?

— এডভোকেট

@ অদ্বৈত আমি এটি আগে ব্যবহৃত দেখিনি। এটি সমস্ত hoverইভেন্ট হ্যান্ডলার সম্পর্কে , যা অনেকগুলি সম্ভাবনা খুলে দেয়।

— মাকরাম সালেহ

আমি এটিকে একটি ভাল সমাধান হিসাবে বিবেচনা করি না কারণ এটি লোকেরা জানায় যে এটি উইন্ডো-অবজেক্ট (= বৈশ্বিক ভেরিয়েবলগুলি ব্যবহার করে) জনসাধারণের পক্ষে ঠিক আছে।

@ Prc322 যা বলেছিল তার সাথে কিছু যুক্ত করার জন্য, আপনি একটি বেনাম ফাংশন দিয়ে আপনার কোডটি গুটিয়ে রাখতে পারেন এবং তা সঙ্গে সঙ্গে কল করতে পারেন। (function() { // ... code })(); আমি এই প্যাটার্নটির নামটি মনে করি না তবে এটি অত্যন্ত কার্যকর! আপনার সমস্ত ঘোষিত ভেরিয়েবলগুলি ফাংশনের অভ্যন্তরে থাকবে এবং বিশ্বব্যাপী নেমস্পেসকে দূষিত করবে না।

— pedromanoel

@ prc322 আপনি যদি ভেরিয়েবলের স্কোপ পরিবর্তন করতে জানেন না তবে আপনারা ঠিক বলেছেন, এই সমাধানটি আপনার পক্ষে ভাল নয় ... এবং এটি জাভাস্ক্রিপ্টও নয় is যদি আপনি কেবল স্ট্যাক ওভারফ্লো থেকে কোড অনুলিপি এবং আটকানো হয় তবে আপনার উইন্ডো অবজেক্টে সম্ভবত কিছু ওভাররাইট করার চেয়ে অনেক বেশি সমস্যা হতে পারে have

— গ্যাভিন

Answer 3

এই কোডটি পৃষ্ঠায় যে কোনও ক্লিক ইভেন্ট সনাক্ত করে এবং তারপরে #CONTAINERউপাদানটিকে লুকিয়ে রাখে যদি কেবলমাত্র উপাদানটিতে ক্লিক করা #CONTAINERউপাদান না হয় এবং তার বংশধরগুলির মধ্যে একটিও ছিল না ।

$(document).on('click', function (e) {
    if ($(e.target).closest("#CONTAINER").length === 0) {
        $("#CONTAINER").hide();
    }
});

Comments

এটা নিখুঁত !!

— মোহাম্মদ আবদুল মুজিব

@ 9 কে সোফ্ট আমি আপনাকে খুশি করতে পেরে আনন্দিত। আপনার মতামত এবং শুভকামনার জন্য আপনাকে ধন্যবাদ।

— কেস

এই সমাধানটি আমার জন্য কনটেইনার হিসাবে একটি ডিভ ব্যবহার করে নিখুঁতভাবে কাজ করেছে!

— JCO9

Answer 4

আপনি ক্লিক ইভেন্টের লক্ষ্যটি পরীক্ষা করতে চাইতে পারেন যা স্টপপ্রোগেশনে নির্ভর না করে দেহের জন্য আগুন জ্বলে।

কিছুটা এইরকম:

$("body").click
(
  function(e)
  {
    if(e.target.className !== "form_wrapper")
    {
      $(".form_wrapper").hide();
    }
  }
);

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

Comments

হ্যাঁ, এখন লিঙ্কগুলি কাজ করে! তবে কোনও কারণে, আমি যখন লিঙ্কটি ক্লিক করি তখন এটি দু'বার জ্বালিয়ে দেয়।

— স্কট ইউ -

আমি এর বিভিন্নতা ব্যবহার করে শেষ করেছি। আমি প্রথমে চেক করছি যদি উপাদানটি দৃশ্যমান হয় তবে টার্গেট.হ্যাস ক্লাস যদি আমি এটি আড়াল করি।

— হককি

এবং e.stopPropagation();আপনার যদি অন্য ক্লিক শ্রোতা থাকে তা ভুলে যাবেন না

— দারিন কোলেভ

-1। form_wrapperআপনি যখন তার কোনও বাচ্চাকে ক্লিক করেন এটি লুকিয়ে রাখে যা পছন্দসই আচরণ নয়। পরিবর্তে prc322 এর উত্তর ব্যবহার করুন।

— মার্ক আমেরিকা

Answer 5

সরাসরি নমুনা

ক্লিকের ক্ষেত্রটি লক্ষ্যযুক্ত উপাদান বা এটির শিশু নয়

$(document).click(function (e) {
    if ($(e.target).parents(".dropdown").length === 0) {
        $(".dropdown").hide();
    }
});

হালনাগাদ:

jQuery স্টপ প্রচার সবচেয়ে ভাল সমাধান

সরাসরি নমুনা

$(".button").click(function(e){
    $(".dropdown").show();
     e.stopPropagation();
});

$(".dropdown").click(function(e){
    e.stopPropagation();
});

$(document).click(function(){
    $(".dropdown").hide();
});

Comments

আপডেটের জন্য ধন্যবাদ, নিখুঁত! এটি টাচ ডিভাইসে কাজ করে?

— এফফিশ

ক্ষেত্রে, আপনার একটি পৃষ্ঠায় একাধিক ড্রপডাউন রয়েছে। আমি মনে করি এটি খোলার আগে আপনার সকল ড্রপডাউন বন্ধ করতে হবে clicked। অন্যথায়, এটি stopPropagationসম্ভব করবে যে একই সময়ে একাধিক ড্রপডাউন খোলা থাকে।

— T04435

Answer 6

$(document).click(function(event) {
    if ( !$(event.target).hasClass('form_wrapper')) {
         $(".form_wrapper").hide();
    }
});

Comments

হুমম ... আমি যদি ডিভের ভিতরে কিছুতে ক্লিক করি তবে পুরো ডিভ কোনও কারণে অদৃশ্য হয়ে যায়।

— স্কট ইউ -

লক্ষ্যটির ক্লাস রয়েছে কিনা তা পরীক্ষার পরিবর্তে, চেষ্টা করুন: যদি ($ (ইভেন্ট.টারাগেট)। ক্লোজস্ট ('। Form_wrapper) .get (0) == নাল) {$ ("। ফর্ম_আপনার")। আড়াল (); } এটি নিশ্চিত করবে যে ডিভের ভিতরে থাকা জিনিসগুলি ক্লিক করা ডিভকে আড়াল করবে না।

— জন হাজের

Answer 7

সমাধান আপডেট করেছেন:

• পরিবর্তে মাউসেন্টার এবং মাউসলেভ ব্যবহার করুন
• হোভার ব্যবহার লাইভ ইভেন্ট বাইন্ডিং

var mouseOverActiveElement = false;

$('.active').live('mouseenter', function(){
    mouseOverActiveElement = true; 
}).live('mouseleave', function(){ 
    mouseOverActiveElement = false; 
});
$("html").click(function(){ 
    if (!mouseOverActiveElement) {
        console.log('clicked outside active element');
    }
});

Comments

.liveএখন অবচয় করা হয়েছে ; .onপরিবর্তে ব্যবহার করুন।

— ব্রেট

Answer 8

সর্বাধিক জনপ্রিয় উত্তরের জন্য jQuery ছাড়াই একটি সমাধান :

document.addEventListener('mouseup', function (e) {
    var container = document.getElementById('your container ID');

    if (!container.contains(e.target)) {
        container.style.display = 'none';
    }
}.bind(this));

MDN: https://developer.mozilla.org/en/docs/Web/API/Node/contains

Comments

bindসেখানে কাজ হয় না। কাজটি করার জন্য আপনি ফাংশনটি ঠিক করতে পারবেন?

— মেমো

Answer 9

ESCকার্যকারিতা সহ লাইভ ডেমো

ডেস্কটপ এবং মোবাইল উভয় ক্ষেত্রেই কাজ করে

var notH = 1,
    $pop = $('.form_wrapper').hover(function(){ notH^=1; });

$(document).on('mousedown keydown', function( e ){
  if(notH||e.which==27) $pop.hide();
});

_{যদি কোনও ক্ষেত্রে আপনার নিশ্চিত হওয়া দরকার যে আপনি যখন নথিতে ক্লিক করেন তখন আপনার উপাদানটি সত্যই দৃশ্যমান: if($pop.is(':visible') && (notH||e.which==27)) $pop.hide();}

Answer 10

এই কাজ মত কিছু না?

$("body *").not(".form_wrapper").click(function() {

});

অথবা

$("body *:not(.form_wrapper)").click(function() {

});

Comments

এই উত্তরটি সঠিক নয়। এখানে অনেক উত্তরের মতো, .form_wrapperআপনি যখন তার বাচ্চাদের ক্লিক করেন তখন এটি লুকিয়ে রাখবে (অন্যান্য সমস্যার মধ্যেও)।

— মার্ক আমেরিকা

Answer 11

এমনকি স্নিগ্ধ:

$("html").click(function(){ 
    $(".wrapper:visible").hide();
});

Comments

এই উত্তরটি সঠিক নয়। .wrapperআপনি পৃষ্ঠায় যেখানে ক্লিক করবেন না কেন এটি আপনার কাছে লুকিয়ে রাখবে , যা চাওয়া হয়েছিল তা নয়।

— মার্ক আমেরিকা

Answer 12

একটি নির্দিষ্ট উপাদানটি গোপন করার জন্য DOM- এ প্রতিটি ক্লিক শোনার পরিবর্তে আপনি tabindexপিতামাতার কাছে সেট করতে <div>পারেন এবং focusoutইভেন্টগুলি শুনতে পারেন ।

সেটিংটি tabindexনিশ্চিত করবে যে blurইভেন্টটি <div>(সাধারণত এটি হবে না) চালিত হয়েছে ।

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

<div class="form_wrapper" tabindex="0">
    <a class="agree" href="javascript:;">I Agree</a>
    <a class="disagree" href="javascript:;">Disagree</a>
</div>

এবং আপনার জেএস:

$('.form_wrapper').on('focusout', function(event){
    $('.form_wrapper').hide();
});

Answer 13

এবং আইপ্যাড এবং আইফোন এর মতো স্পর্শ ডিভাইসের জন্য আমরা নিম্নলিখিত কোডটি ব্যবহার করতে পারি

$(document).on('touchstart', function (event) {
var container = $("YOUR CONTAINER SELECTOR");

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

Answer 14

এখানে অন্য একটি থ্রেডে আমি পেয়েছি এমন একটি জেসফিডেল, এসকি কী দিয়েও কাজ করে: http://jsfiddle.net/S5ftb/404

    var button = $('#open')[0]
    var el     = $('#test')[0]

    $(button).on('click', function(e) {
      $(el).show()
      e.stopPropagation()
    })

    $(document).on('click', function(e) {
      if ($(e.target).closest(el).length === 0) {
        $(el).hide()
      }
    })

    $(document).on('keydown', function(e) {
      if (e.keyCode === 27) {
        $(el).hide()
      }
    })

Comments

আমি দেখতে পেয়েছি যে এটি "ক্লিক করুন" ইভেন্টটি সর্বশেষতম উপাদানগুলির মধ্যে রয়েছে কিনা তা সনাক্ত করে .. jsfiddle.net/TA96A হিসাবে লিঙ্কগুলি পরীক্ষার চেষ্টা করেছে এবং দেখে মনে হচ্ছে তারা কার্যকর হতে পারে।

— থমাস ডাব্লু

হ্যাঁ, এটি লিঙ্কগুলির বাইরের jsfiddle ব্লকগুলির মতো দেখায়। আপনি যদি http: // jsfiddle.net ব্যবহার করেন তবে ফলাফলের লিঙ্কটি প্রক্রিয়াটি দেখতে পাবেন :)

— ডিজেভি

Answer 15

Prc322 এর দুর্দান্ত উত্তর দিয়ে তৈরি।

function hideContainerOnMouseClickOut(selector, callback) {
  var args = Array.prototype.slice.call(arguments); // Save/convert arguments to array since we won't be able to access these within .on()
  $(document).on("mouseup.clickOFF touchend.clickOFF", function (e) {
    var container = $(selector);

    if (!container.is(e.target) // if the target of the click isn't the container...
        && container.has(e.target).length === 0) // ... nor a descendant of the container
    {
      container.hide();
      $(document).off("mouseup.clickOFF touchend.clickOFF");
      if (callback) callback.apply(this, args);
    }
  });
}

এটি কয়েকটি জিনিস যুক্ত করে ...

1. "সীমাহীন" আরোগুলি সহ কলব্যাকের সাথে একটি ফাংশনের মধ্যে স্থাপন করা হয়
2. Jquery এর .Of () এ ইভেন্টটি ডকুমেন্ট থেকে চালানোর পরে ইভেন্টটি আবদ্ধ করার জন্য ইভেন্ট নেমস্পেসের সাথে যুক্ত করে একটি কল যুক্ত করা হয়েছে।
3. মোবাইল কার্যকারিতা জন্য স্পর্শ অন্তর্ভুক্ত

আমি আশা করি এটা কারো সাহায্যে লাগবে!

Answer 16

আইওএস নিয়ে আপনার যদি সমস্যা হয় তবে আপেল ডিভাইসে মাউসআপ কাজ করছে না।

আইক্যাডে মাউসডাউন / মাউসআপ আইক্যাডের জন্য কাজ করে?

আমি এটি ব্যবহার:

$(document).bind('touchend', function(e) {
        var container = $("YOURCONTAINER");

          if (container.has(e.target).length === 0)
          {
              container.hide();
          }
      });

Answer 17

(কেবলমাত্র prc322 এর উত্তর যোগ করুন))

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

$(document).mouseup(function (e)
{
    var container = $("YOUR CONTAINER SELECTOR");

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

এটি কারণ আমার সাইটের লিঙ্কগুলির কিছু পৃষ্ঠাতে নতুন সামগ্রী যুক্ত করে। যদি এই নতুন সামগ্রীটি একই সময়ে যুক্ত করা হয় যে নেভিগেশন মেনু অদৃশ্য হয়ে যায় তবে এটি ব্যবহারকারীর জন্য বিভ্রান্তিকর হতে পারে।

Answer 18

এতগুলি উত্তর, একটি যুক্ত করার জন্য অবশ্যই উত্তীর্ণ হওয়ার অধিকার হতে হবে ... আমি একটি বর্তমান (jQuery 3.1.1) উত্তর দেখিনি - তাই:

$(function() {
    $('body').on('mouseup', function() {
        $('#your-selector').hide();
    });
});

Answer 19

var n = 0;
$("#container").mouseenter(function() {
n = 0;

}).mouseleave(function() {
n = 1;
});

$("html").click(function(){ 
if (n == 1) {
alert("clickoutside");
}
});

Answer 20

 $('body').click(function(event) {
    if (!$(event.target).is('p'))
    {
        $("#e2ma-menu").hide();
    }
});

pউপাদান নাম। যেখানে কেউ আইডি বা শ্রেণি বা উপাদানটির নাম পাস করতে পারে।

Answer 21

আপনি .for_wrapper ক্লিক করলে মিথ্যা প্রত্যাবর্তন করুন:

$('body').click(function() {
  $('.form_wrapper').click(function(){
  return false
});
   $('.form_wrapper').hide();
});

//$('.form_wrapper').click(function(event){
//   event.stopPropagation();
//});

Answer 22

ফর্মের মোড়কের বাইরে শীর্ষ স্তরের উপাদানগুলিতে একটি ক্লিক ইভেন্ট সংযুক্ত করুন, উদাহরণস্বরূপ:

$('#header, #content, #footer').click(function(){
    $('.form_wrapper').hide();
});

এটি টাচ ডিভাইসগুলিতেও কাজ করবে, কেবলমাত্র আপনার নির্বাচকদের তালিকায় আপনি .for_wrapper এর পিতামাতাকে অন্তর্ভুক্ত করবেন না তা নিশ্চিত করুন।

Answer 23

var exclude_div = $("#ExcludedDiv");;  
$(document).click(function(e){
   if( !exclude_div.is( e.target ) )  // if target div is not the one you want to exclude then add the class hidden
        $(".myDiv1").addClass("hidden");  

}); 

বেহালা

Answer 24

$(document).ready(function() {
	$('.modal-container').on('click', function(e) {
	  if(e.target == $(this)[0]) {
		$(this).removeClass('active'); // or hide()
	  }
	});
});

.modal-container {
	display: none;
	justify-content: center;
	align-items: center;
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: rgba(0,0,0,0.5);
	z-index: 999;
}

.modal-container.active {
    display: flex;  
}

.modal {
	width: 50%;
	height: auto;
	margin: 20px;
	padding: 20px;
	background-color: #fff;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="modal-container active">
	<div class="modal">
		<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean ac varius purus. Ut consectetur viverra nibh nec maximus. Nam luctus ligula quis arcu accumsan euismod. Pellentesque imperdiet volutpat mi et cursus. Sed consectetur sed tellus ut finibus. Suspendisse porttitor laoreet lobortis. Nam ut blandit metus, ut interdum purus.</p>
	</div>
</div>

Answer 25

Https://sdtuts.com/click-on-not-specified-element/ থেকে অনুলিপি করা হয়েছে

লাইভ ডেমো http://demos.sdtuts.com/click-on-specified-element

$(document).ready(function () {
    var is_specified_clicked;
    $(".specified_element").click(function () {
        is_specified_clicked = true;
        setTimeout(function () {
            is_specified_clicked = false;
        }, 200);
    })
    $("*").click(function () {
        if (is_specified_clicked == true) {
//WRITE CODE HERE FOR CLICKED ON OTHER ELEMENTS
            $(".event_result").text("you were clicked on specified element");
        } else {
//WRITE CODE HERE FOR SPECIFIED ELEMENT CLICKED
            $(".event_result").text("you were clicked not on specified element");
        }
    })
})

Answer 26

আমি এটি এর মতো করেছিলাম:

var close = true;

$(function () {

    $('body').click (function(){

        if(close){
            div.hide();
        }
        close = true;
    })


alleswasdenlayeronclicknichtschliessensoll.click( function () {   
        close = false;
    });

});

Answer 27

dojo.query(document.body).connect('mouseup',function (e)
{
    var obj = dojo.position(dojo.query('div#divselector')[0]);
    if (!((e.clientX > obj.x && e.clientX <(obj.x+obj.w)) && (e.clientY > obj.y && e.clientY <(obj.y+obj.h))) ){
        MyDive.Hide(id);
    }
});

Answer 28

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

var boxArray = ["first element's id","second element's id","nth element's id"];
   window.addEventListener('mouseup', function(event){
   for(var i=0; i < boxArray.length; i++){
    var box = document.getElementById(boxArray[i]);
    if(event.target != box && event.target.parentNode != box){
        box.style.display = 'none';
    }
   }
})

Answer 29

আপনি যা করতে পারেন তা হ'ল ডকুমেন্টে একটি ক্লিক ইভেন্ট বাঁধাই যা ড্রপডাউনটির বাইরে কিছু ক্লিক করা থাকলে ড্রপডাউনটি লুকিয়ে রাখবে, তবে ড্রপডাউনের অভ্যন্তরে কিছু ক্লিক করা থাকলে এটি আড়াল করবে না, সুতরাং আপনার "শো" ইভেন্ট (বা স্লাইডডাউন বা যা কিছু হোক না কেন) ড্রপডাউন দেখায়)

    $('.form_wrapper').show(function(){

        $(document).bind('click', function (e) {
            var clicked = $(e.target);
            if (!clicked.parents().hasClass("class-of-dropdown-container")) {
                 $('.form_wrapper').hide();
            }
        });

    });

তারপরে এটি লুকানোর সময়, ক্লিক ইভেন্টটি আবদ্ধ করুন

$(document).unbind('click');

Answer 30

ডক্স অনুসারে , ট্যাগের .blur()চেয়ে বেশি কাজ করে <input>। উদাহরণ স্বরূপ:

$('.form_wrapper').blur(function(){
   $(this).hide();
});

Comments

-1, কাজ করে না। খুব আকর্ষণীয় ধারণা, তবে jQuery ডক্স ভুল। উদাহরণস্বরূপ বিকাশকারী.মোজিলা.আর.ইন- ইউএস / ডকস / ওয়েবে / এপিআই / ২ দেখুন : "এমএসআইইর বিপরীতে - যার মধ্যে প্রায় সব ধরণের উপাদানই অস্পষ্ট ঘটনাটি গ্রহণ করে - গেকো ব্রাউজারগুলিতে প্রায় সমস্ত ধরণের উপাদান এই ইভেন্টের সাথে কাজ করবেন না। " এছাড়াও, ক্রোমে পরীক্ষা করা হয়েছে এবং divএগুলি কখনই অস্পষ্ট করে না - অস্পষ্ট ইভেন্টগুলি তাদের বাচ্চাদের কাছ থেকে এমনকি তাদের বুদবুদ করতে পারে না। শেষ পর্যন্ত, উপরেরটি সত্য না হলেও এটি কেবল তখনই কাজ করবে যদি আপনি এটি নিশ্চিত করে থাকেন যে .form_wrapperব্যবহারকারী এটি ক্লিক করার আগেই ফোকাসে ছিল was

— মার্ক অ্যামেরি