javascript - link - jquery w3schools




আমি কিভাবে একটি উপাদান বাইরে একটি ক্লিক সনাক্ত করতে পারি? (20)

আমার কিছু এইচটিএমএল মেনু রয়েছে, যা কোনও ব্যবহারকারী এই মেনুর মাথায় ক্লিক করলে আমি সম্পূর্ণরূপে দেখাব। ব্যবহারকারী যখন মেনু এলাকার বাইরে ক্লিক করে তখন আমি এই উপাদানগুলি লুকাতে চাই।

JQuery এর সাথে এই মত কিছু?

$("#menuscontainer").clickOutsideThisElement(function() {
    // Hide the menus
});

একটি উপাদান বাইরে একটি ক্লিক সনাক্ত কিভাবে?

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

ব্যবহারকারী যখন মেনু এলাকার বাইরে ক্লিক করে তখন আমি এই উপাদানগুলি লুকাতে চাই।

এটি একটি মহৎ কারণ এবং প্রকৃত সমস্যা। প্রশ্নটির শিরোনাম- যা বেশিরভাগ উত্তর সম্বোধন করার চেষ্টা করা হয় - একটি দুর্ভাগ্যজনক লাল হরিণ রয়েছে।

ইঙ্গিত: এটি "ক্লিক করুন" শব্দ!

আপনি আসলে হ্যান্ডলার ক্লিক বাঁধতে চান না।

আপনি যদি ডায়ালগটি বন্ধ করতে হ্যান্ডলারদের বাঁধন করেন তবে আপনি ইতিমধ্যে ব্যর্থ হয়েছেন। আপনি ব্যর্থ হওয়ার কারণ হ'ল প্রত্যেকে click ইভেন্টগুলিকে ট্রিগার করে না। ব্যবহারকারীরা মাউস ব্যবহার না করে আপনার ডায়ালগটি থেকে পালাতে সক্ষম হবে (এবং আপনার পপ-আপ মেনু যুক্তিযুক্তভাবে একটি প্রকারের ডায়ালগ) ট্যাব টিপে, এবং তারপর ডায়ালগের পিছনে কোনও সামগ্রী ট্রিগার না করেই সেটি পড়তে পারবে না ইভেন্ট।

তাই আসুন প্রশ্ন refrase।

একজন ব্যবহারকারী যখন এটির সাথে সম্পন্ন হয় তখন কোনও সংলাপ বন্ধ করে?

এই লক্ষ্য। দুর্ভাগ্যবশত, এখন আমরা userisfinishedwiththedialog ইভেন্টটি বন্ধ করতে হবে, এবং যে বাঁধাই তাই সহজবোধ্য নয়।

সুতরাং কিভাবে আমরা একটি ব্যবহারকারী একটি ডায়ালগ ব্যবহার করে সমাপ্তি সনাক্ত করতে পারেন?

focusout ইভেন্ট

একটি ভাল শুরু ফোকাস ডায়ালগ বামে কিনা নির্ধারণ করা হয়।

ইঙ্গিত: blur ইভেন্টের সাথে সাবধান থাকুন, ইভেন্টটি বুদবুদ পর্যায়ে আবদ্ধ থাকলে প্রচার করা হয় না!

jQuery এর focusout ঠিক সূক্ষ্ম হবে। আপনি যদি jQuery ব্যবহার করতে না পারেন, তবে আপনি ক্যাপচারিং পর্যায়ে blur ব্যবহার করতে পারেন:

element.addEventListener('blur', ..., true);
//                       use capture: ^^^^

এছাড়াও, অনেক সংলাপের জন্য আপনাকে কন্টেইনারকে ফোকাস পাওয়ার অনুমতি দিতে হবে। tabindex="-1" যোগ করুন ডায়ালগটিকে অন্যথায় ট্যাবিং প্রবাহে বাধা না দিলে গতিশীলভাবে ফোকাস পেতে অনুমতি দেয়।

$('a').on('click', function () {
  $(this.hash).toggleClass('active').focus();
});

$('div').on('focusout', function () {
  $(this).removeClass('active');
});
div {
  display: none;
}
.active {
  display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href="#example">Example</a>
<div id="example" tabindex="-1">
  Lorem ipsum <a href="http://example.com">dolor</a> sit amet.
</div>

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

প্রথমটি হল ডায়ালগের লিঙ্কটি ক্লিকযোগ্য নয়। এটিতে বা ট্যাবে ক্লিক করার চেষ্টা করা হলে মিথস্ক্রিয়া সংঘটিত হওয়ার আগে ডায়ালগ বন্ধ করা হবে। কারণ focusin ইভেন্টটি আবার ট্রিগার করার আগে ভিতরের উপাদানটি ফোকাস করা একটি focusout ইভেন্ট ট্রিগার করে।

ফিক্স ইভেন্ট লুপ রাষ্ট্র পরিবর্তন সারি হয়। এটি setImmediate(...) , বা setTimeout(..., 0) ব্যবহার করে করা যেতে পারে যা ব্রাউজারগুলির জন্য setImmediate সমর্থন করে না। একবার সারিবদ্ধ হলে এটি পরবর্তী focusin দ্বারা বাতিল করা যেতে পারে:

$('.submenu').on({
  focusout: function (e) {
    $(this).data('submenuTimer', setTimeout(function () {
      $(this).removeClass('submenu--active');
    }.bind(this), 0));
  },
  focusin: function (e) {
    clearTimeout($(this).data('submenuTimer'));
  }
});

$('a').on('click', function () {
  $(this.hash).toggleClass('active').focus();
});

$('div').on({
  focusout: function () {
    $(this).data('timer', setTimeout(function () {
      $(this).removeClass('active');
    }.bind(this), 0));
  },
  focusin: function () {
    clearTimeout($(this).data('timer'));
  }
});
div {
  display: none;
}
.active {
  display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href="#example">Example</a>
<div id="example" tabindex="-1">
  Lorem ipsum <a href="http://example.com">dolor</a> sit amet.
</div>

দ্বিতীয় সমস্যা হলো লিঙ্কটি আবার চাপলে ডায়ালগটি বন্ধ হবে না। এটি ডায়ালগটি ফোকাস হ্রাস করে, ঘনিষ্ঠ আচরণকে ট্রিগার করে, তারপরে লিঙ্ক ক্লিকটি পুনরায় খুলতে ডায়ালগটিকে ট্রিগার করে।

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

এই পরিচিত হওয়া উচিত
$('a').on({
  focusout: function () {
    $(this.hash).data('timer', setTimeout(function () {
      $(this.hash).removeClass('active');
    }.bind(this), 0));
  },
  focusin: function () {
    clearTimeout($(this.hash).data('timer'));  
  }
});

$('a').on('click', function () {
  $(this.hash).toggleClass('active').focus();
});

$('div').on({
  focusout: function () {
    $(this).data('timer', setTimeout(function () {
      $(this).removeClass('active');
    }.bind(this), 0));
  },
  focusin: function () {
    clearTimeout($(this).data('timer'));
  }
});

$('a').on({
  focusout: function () {
    $(this.hash).data('timer', setTimeout(function () {
      $(this.hash).removeClass('active');
    }.bind(this), 0));
  },
  focusin: function () {
    clearTimeout($(this.hash).data('timer'));  
  }
});
div {
  display: none;
}
.active {
  display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href="#example">Example</a>
<div id="example" tabindex="-1">
  Lorem ipsum <a href="http://example.com">dolor</a> sit amet.
</div>

Esc কী

আপনি যদি ফোকাস স্টেটস পরিচালনা করে সম্পন্ন হন বলে মনে করেন তবে ব্যবহারকারীর অভিজ্ঞতাটি সহজ করার জন্য আপনি আরো কিছু করতে পারেন।

এটি প্রায়শই একটি "চমৎকার" বৈশিষ্ট্য থাকে তবে এটি সাধারণ যে কোনও ধরণের মোডাল বা পপআপ থাকলে Esc কীটি বন্ধ করে দেবে।

keydown: function (e) {
  if (e.which === 27) {
    $(this).removeClass('active');
    e.preventDefault();
  }
}

$('a').on('click', function () {
  $(this.hash).toggleClass('active').focus();
});

$('div').on({
  focusout: function () {
    $(this).data('timer', setTimeout(function () {
      $(this).removeClass('active');
    }.bind(this), 0));
  },
  focusin: function () {
    clearTimeout($(this).data('timer'));
  },
  keydown: function (e) {
    if (e.which === 27) {
      $(this).removeClass('active');
      e.preventDefault();
    }
  }
});

$('a').on({
  focusout: function () {
    $(this.hash).data('timer', setTimeout(function () {
      $(this.hash).removeClass('active');
    }.bind(this), 0));
  },
  focusin: function () {
    clearTimeout($(this.hash).data('timer'));  
  }
});
div {
  display: none;
}
.active {
  display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href="#example">Example</a>
<div id="example" tabindex="-1">
  Lorem ipsum <a href="http://example.com">dolor</a> sit amet.
</div>

যদি আপনি জানেন যে আপনার কথোপকথনের মধ্যে ফোকাসযোগ্য উপাদান আছে, তবে সরাসরি ডায়ালগটি ফোকাস করতে হবে না। আপনি যদি একটি মেনু তৈরি করেন তবে পরিবর্তে আপনি প্রথম মেনু আইটেমটি ফোকাস করতে পারেন।

click: function (e) {
  $(this.hash)
    .toggleClass('submenu--active')
    .find('a:first')
    .focus();
  e.preventDefault();
}

$('.menu__link').on({
  click: function (e) {
    $(this.hash)
      .toggleClass('submenu--active')
      .find('a:first')
      .focus();
    e.preventDefault();
  },
  focusout: function () {
    $(this.hash).data('submenuTimer', setTimeout(function () {
      $(this.hash).removeClass('submenu--active');
    }.bind(this), 0));
  },
  focusin: function () {
    clearTimeout($(this.hash).data('submenuTimer'));  
  }
});

$('.submenu').on({
  focusout: function () {
    $(this).data('submenuTimer', setTimeout(function () {
      $(this).removeClass('submenu--active');
    }.bind(this), 0));
  },
  focusin: function () {
    clearTimeout($(this).data('submenuTimer'));
  },
  keydown: function (e) {
    if (e.which === 27) {
      $(this).removeClass('submenu--active');
      e.preventDefault();
    }
  }
});
.menu {
  list-style: none;
  margin: 0;
  padding: 0;
}
.menu:after {
  clear: both;
  content: '';
  display: table;
}
.menu__item {
  float: left;
  position: relative;
}

.menu__link {
  background-color: lightblue;
  color: black;
  display: block;
  padding: 0.5em 1em;
  text-decoration: none;
}
.menu__link:hover,
.menu__link:focus {
  background-color: black;
  color: lightblue;
}

.submenu {
  border: 1px solid black;
  display: none;
  left: 0;
  list-style: none;
  margin: 0;
  padding: 0;
  position: absolute;
  top: 100%;
}
.submenu--active {
  display: block;
}

.submenu__item {
  width: 150px;
}

.submenu__link {
  background-color: lightblue;
  color: black;
  display: block;
  padding: 0.5em 1em;
  text-decoration: none;
}

.submenu__link:hover,
.submenu__link:focus {
  background-color: black;
  color: lightblue;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="menu">
  <li class="menu__item">
    <a class="menu__link" href="#menu-1">Menu 1</a>
    <ul class="submenu" id="menu-1" tabindex="-1">
      <li class="submenu__item"><a class="submenu__link" href="http://example.com/#1">Example 1</a></li>
      <li class="submenu__item"><a class="submenu__link" href="http://example.com/#2">Example 2</a></li>
      <li class="submenu__item"><a class="submenu__link" href="http://example.com/#3">Example 3</a></li>
      <li class="submenu__item"><a class="submenu__link" href="http://example.com/#4">Example 4</a></li>
    </ul>
  </li>
  <li class="menu__item">
    <a  class="menu__link" href="#menu-2">Menu 2</a>
    <ul class="submenu" id="menu-2" tabindex="-1">
      <li class="submenu__item"><a class="submenu__link" href="http://example.com/#1">Example 1</a></li>
      <li class="submenu__item"><a class="submenu__link" href="http://example.com/#2">Example 2</a></li>
      <li class="submenu__item"><a class="submenu__link" href="http://example.com/#3">Example 3</a></li>
      <li class="submenu__item"><a class="submenu__link" href="http://example.com/#4">Example 4</a></li>
    </ul>
  </li>
</ul>
lorem ipsum <a href="http://example.com/">dolor</a> sit amet.

WAI-ARIA ভূমিকা এবং অন্যান্য অ্যাক্সেসযোগ্যতা সমর্থন

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


দ্রষ্টব্য: stopEventPropagation() ব্যবহার করে এমন কিছু যা এড়িয়ে যাওয়া উচিত কারণ এটি DOM- এ স্বাভাবিক ইভেন্ট প্রবাহটি ভেঙ্গে দেয়। আরও তথ্যের জন্য এই নিবন্ধটি দেখুন। পরিবর্তে এই পদ্ধতি ব্যবহার করে বিবেচনা করুন।

ডকুমেন্ট শরীরের একটি ক্লিক ইভেন্ট সংযুক্ত করুন যা উইন্ডো বন্ধ করে। কনটেইনারে একটি আলাদা ক্লিক ইভেন্ট সংযুক্ত করুন যা দস্তাবেজের শরীরের প্রচার বন্ধ করে দেয়।

$(window).click(function() {
//Hide the menus if visible
});

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

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

$('#menuscontainer').click(function(event) {
    //your code that shows the menus fully

    //now set up an event listener so that clicking anywhere outside will close the menu
    $('html').click(function(event) {
        //check up the tree of the click target to check whether user has clicked outside of menu
        if ($(event.target).parents('#menuscontainer').length==0) {
            // your code to hide menu

            //this event listener has done its job so we can unbind it.
            $(this).unbind(event);
        }

    })
});

আপনি document একটি ক্লিক ইভেন্টের জন্য শুনতে পারেন এবং তারপরে নিশ্চিত করুন #menucontainer .closest() ব্যবহার করে একটি পূর্বপুরুষ বা ক্লিক করা উপাদানটির লক্ষ্য নয়।

যদি এটি না হয় তবে ক্লিক করা উপাদানটি #menucontainer বাইরে এবং আপনি নিরাপদে এটি লুকিয়ে রাখতে পারেন।

$(document).click(function(event) { 
    if(!$(event.target).closest('#menucontainer').length) {
        if($('#menucontainer').is(":visible")) {
            $('#menucontainer').hide();
        }
    }        
});

সম্পাদনা - 2017-06-23

ইভেন্ট শোনার পরে আপনি পরিষ্কার করতে পারেন যদি আপনি মেনুটি বাতিল করার পরিকল্পনা করেন এবং ইভেন্টগুলির জন্য শোনা বন্ধ করতে চান। এই ফাংশন শুধুমাত্র নতুন তৈরি শ্রোতা, document উপর অন্য কোন ক্লিক শ্রোতা সংরক্ষণ করা হবে। ES2015 সিনট্যাক্সের সাথে:

export function hideOnClickOutside(selector) {
  const outsideClickListener = (event) => {
    if (!$(event.target).closest(selector).length) {
      if ($(selector).is(':visible')) {
        $(selector).hide()
        removeClickListener()
      }
    }
  }

  const removeClickListener = () => {
    document.removeEventListener('click', outsideClickListener)
  }

  document.addEventListener('click', outsideClickListener)
}

সম্পাদনা - 2018-03-11

যারা jQuery ব্যবহার করতে চান না তাদের জন্য। এখানে উপরের কোডটি প্লেইন ভ্যানিলাএজেএস (ECMAScript6) এ রয়েছে।

function hideOnClickOutside(element) {
    const outsideClickListener = event => {
        if (!element.contains(event.target)) { // or use: event.target.closest(selector) === null
            if (isVisible(element)) {
                element.style.display = 'none'
                removeClickListener()
            }
        }
    }

    const removeClickListener = () => {
        document.removeEventListener('click', outsideClickListener)
    }

    document.addEventListener('click', outsideClickListener)
}

const isVisible = elem => !!elem && !!( elem.offsetWidth || elem.offsetHeight || elem.getClientRects().length ) // source (2018-03-11): https://github.com/jquery/jquery/blob/master/src/css/hiddenVisibleSelectors.js 

দ্রষ্টব্য: এইটি শুধুমাত্র !element.contains(event.target) উপর ভিত্তি করে তৈরি করা হয়েছে jQuery অংশটির পরিবর্তে !element.contains(event.target) ব্যবহার করুন।

কিন্তু element.closest() এখন সব প্রধান ব্রাউজারে উপলব্ধ (W3C সংস্করণ jQuery এক থেকে কিছুটা ভিন্ন)। Polyfills এখানে পাওয়া যাবে: https://developer.mozilla.org/en-US/docs/Web/API/Element/closest


আমি একটি অ্যাপ্লিকেশন যা ইরাণের উদাহরণের মতো কাজ করে, আমি যখন মেনু খুলি তখন শরীরের ক্লিক ইভেন্টটি সংযুক্ত না করেই ... এই ধরনের কিণ্ডার:

$('#menucontainer').click(function(event) {
  $('html').one('click',function() {
    // Hide the menus
  });

  event.stopPropagation();
});

JQuery এর one() ফাংশন সম্পর্কে আরও তথ্য


আমি কিছু jQuery ক্যালেন্ডার প্লাগইন এই পদ্ধতি খুঁজে পাওয়া যায় নি।

function ClickOutsideCheck(e)
{
  var el = e.target;
  var popup = $('.popup:visible')[0];
  if (popup==undefined)
    return true;

  while (true){
    if (el == popup ) {
      return true;
    } else if (el == document) {
      $(".popup").hide();
      return false;
    } else {
      el = $(el).parent()[0];
    }
  }
};

$(document).bind('mousedown.popup', ClickOutsideCheck);

এই আমার জন্য পুরোপুরি কাজ !!

$('html').click(function (e) {
    if (e.target.id == 'YOUR-DIV-ID') {
        //do something
    } else {
        //do something
    }
});

একটি রূপ হিসাবে:

var $menu = $('#menucontainer');
$(document).on('click', function (e) {

    // If element is opened and click target is outside it, hide it
    if ($menu.is(':visible') && !$menu.is(e.target) && !$menu.has(e.target).length) {
        $menu.hide();
    }
});

এটি css-tricks.com/dangers-stopping-event-propagation কোন সমস্যা নেই এবং একই পৃষ্ঠায় একাধিক মেনুগুলিকে আরও ভালভাবে সমর্থন করে যেখানে প্রথম খোলা থাকা অবস্থায় দ্বিতীয় মেনুতে ক্লিক করা হলে স্টপ প্রোপারেশন সমাধানতে প্রথম খোলা থাকবে।


এখানে অন্যান্য সমাধান আমার জন্য কাজ করেনি তাই আমি ব্যবহার করতে হবে:

if(!$(event.target).is('#foo'))
{
    // hide menu
}

এখানে ভবিষ্যতে দর্শকদের জন্য ভ্যানিলা জাভাস্ক্রিপ্ট সমাধান।

ডকুমেন্টের মধ্যে যেকোনো উপাদান ক্লিক করার পরে, যদি ক্লিক করা উপাদানটির আইডি টগল করা হয়, বা লুকানো উপাদানটি লুকানো থাকে না এবং লুকানো উপাদানটিতে উপাদানটি টগল করা থাকে তবে ক্লিক করা উপাদানটি থাকে না।

(function () {
    "use strict";
    var hidden = document.getElementById('hidden');
    document.addEventListener('click', function (e) {
        if (e.target.id == 'toggle' || (hidden.style.display != 'none' && !hidden.contains(e.target))) hidden.style.display = hidden.style.display == 'none' ? 'block' : 'none';
    }, false);
})();

(function () {
    "use strict";
    var hidden = document.getElementById('hidden');
    document.addEventListener('click', function (e) {
        if (e.target.id == 'toggle' || (hidden.style.display != 'none' && !hidden.contains(e.target))) hidden.style.display = hidden.style.display == 'none' ? 'block' : 'none';
    }, false);
})();
<a href="javascript:void(0)" id="toggle">Toggle Hidden Div</a>
<div id="hidden" style="display: none;">This content is normally hidden. click anywhere other than this content to make me disappear</div>

আপনি একই পৃষ্ঠায় একাধিক toggles আছে যাচ্ছি যদি আপনি এই মত কিছু ব্যবহার করতে পারেন:

  1. hiddenCollapsible আইটেমে ক্লাস নাম যোগ করুন।
  2. নথিতে ক্লিক করে, সমস্ত লুকানো উপাদান বন্ধ করুন যা ক্লিক করা উপাদান ধারণ করে না এবং লুকানো হয় না
  3. যদি ক্লিক করা উপাদান একটি টগল হয়, নির্দিষ্ট উপাদান টগল করুন।

(function () {
    "use strict";
    var hiddenItems = document.getElementsByClassName('hidden'), hidden;
    document.addEventListener('click', function (e) {
        for (var i = 0; hidden = hiddenItems[i]; i++) {
            if (!hidden.contains(e.target) && hidden.style.display != 'none')
                hidden.style.display = 'none';
        }
        if (e.target.getAttribute('data-toggle')) {
            var toggle = document.querySelector(e.target.getAttribute('data-toggle'));
            toggle.style.display = toggle.style.display == 'none' ? 'block' : 'none';
        }
    }, false);
})();
<a href="javascript:void(0)" data-toggle="#hidden1">Toggle Hidden Div</a>
<div class="hidden" id="hidden1" style="display: none;" data-hidden="true">This content is normally hidden</div>
<a href="javascript:void(0)" data-toggle="#hidden2">Toggle Hidden Div</a>
<div class="hidden" id="hidden2" style="display: none;" data-hidden="true">This content is normally hidden</div>
<a href="javascript:void(0)" data-toggle="#hidden3">Toggle Hidden Div</a>
<div class="hidden" id="hidden3" style="display: none;" data-hidden="true">This content is normally hidden</div>


পরিস্থিতির জন্য একটি সহজ সমাধান হল:

$(document).mouseup(function (e)
{
    var container = $("YOUR SELECTOR"); // Give you class or ID

    if (!container.is(e.target) &&            // If the target of the click is not the desired div or section
        container.has(e.target).length === 0) // ... nor a descendant-child of the container
    {
        container.hide();
    }
});

div ক্লিক ইভেন্টের বাইরে ট্রিগার হলে উপরের স্ক্রিপ্ট div লুকিয়ে রাখবে।

আপনি আরও তথ্যের জন্য নিম্নলিখিত ব্লগটি দেখতে পারেন: http://www.codecanal.com/detect-click-outside-div-using-javascript/


ব্যবহার করুন:

var go = false;
$(document).click(function(){
    if(go){
        $('#divID').hide();
        go = false;
    }
})

$("#divID").mouseover(function(){
    go = false;
});

$("#divID").mouseout(function (){
    go = true;
});

$("btnID").click( function(){
    if($("#divID:visible").length==1)
        $("#divID").hide(); // Toggle
    $("#divID").show();
});

আমি এই মত কিছু করছেন শেষ পর্যন্ত:

$(document).on('click', 'body, #msg_count_results .close',function() {
    $(document).find('#msg_count_results').remove();
});
$(document).on('click','#msg_count_results',function(e) {
    e.preventDefault();
    return false;
});

শেষ ব্যবহারকারীদের বন্ধুত্বপূর্ণ UI উদ্দেশ্যে নতুন কন্টেইনারের মধ্যে একটি ঘনিষ্ঠ বোতাম আছে। আমি মাধ্যমে যেতে না করার জন্য মিথ্যা ফেরত ব্যবহার ছিল। অবশ্যই, আপনাকে কোথাও নিয়ে যাওয়ার জন্য একটি এইচআরইএফ থাকা ভাল হবে, অথবা আপনি পরিবর্তে কিছু AJAX স্টাফ কল করতে পারেন। উভয় উপায়, এটা আমার জন্য ঠিক কাজ করে। শুধু আমি চেয়েছিলেন কি।


এই সমস্যাটি আমার সমাধান:

$(document).ready(function() {
  $('#user-toggle').click(function(e) {
    $('#user-nav').toggle();
    e.stopPropagation();
  });

  $('body').click(function() {
    $('#user-nav').hide(); 
  });

  $('#user-nav').click(function(e){
    e.stopPropagation();
  });
});

ফাংশন:

$(function() {
    $.fn.click_inout = function(clickin_handler, clickout_handler) {
        var item = this;
        var is_me = false;
        item.click(function(event) {
            clickin_handler(event);
            is_me = true;
        });
        $(document).click(function(event) {
            if (is_me) {
                is_me = false;
            } else {
                clickout_handler(event);
            }
        });
        return this;
    }
});

ব্যবহার:

this.input = $('<input>')
    .click_inout(
        function(event) { me.ShowTree(event); },
        function() { me.Hide(); }
    )
    .appendTo(this.node);

এবং ফাংশন খুব সহজ:

ShowTree: function(event) {
    this.data_span.show();
}
Hide: function() {
    this.data_span.hide();
}

যদি আপনি IE এবং FF 3 এর জন্য স্ক্রিপ্টিং করেন তবে * এবং আপনি ঠিক জানতে চান যে একটি নির্দিষ্ট বক্স এলাকায় ক্লিকটি ঘটে কিনা, আপনি এমন কিছু ব্যবহার করতে পারেন:

this.outsideElementClick = function(objEvent, objElement){   
var objCurrentElement = objEvent.target || objEvent.srcElement;
var blnInsideX = false;
var blnInsideY = false;

if (objCurrentElement.getBoundingClientRect().left >= objElement.getBoundingClientRect().left && objCurrentElement.getBoundingClientRect().right <= objElement.getBoundingClientRect().right)
    blnInsideX = true;

if (objCurrentElement.getBoundingClientRect().top >= objElement.getBoundingClientRect().top && objCurrentElement.getBoundingClientRect().bottom <= objElement.getBoundingClientRect().bottom)
    blnInsideY = true;

if (blnInsideX && blnInsideY)
    return false;
else
    return true;}

সহজ ব্যবহারের জন্য, এবং আরো এক্সিকিউটিভ কোড, আমি এই জন্য একটি jQuery প্লাগইন তৈরি:

$('div.my-element').clickOut(function(target) { 
    //do something here... 
});

দ্রষ্টব্য: লক্ষ্য আসলে ব্যবহারকারী ক্লিক করা উপাদান। কিন্তু কলব্যাক এখনও মূল উপাদান প্রেক্ষাপটে মৃত্যুদন্ড কার্যকর, সুতরাং আপনি ব্যবহার করতে পারেন এই হিসাবে আপনি একটি jQuery কলব্যাক মধ্যে আশা চাই।

প্লাগ লাগানো:

$.fn.clickOut = function (parent, fn) {
    var context = this;
    fn = (typeof parent === 'function') ? parent : fn;
    parent = (parent instanceof jQuery) ? parent : $(document);

    context.each(function () {
        var that = this;
        parent.on('click', function (e) {
            var clicked = $(e.target);
            if (!clicked.is(that) && !clicked.parents().is(that)) {
                if (typeof fn === 'function') {
                    fn.call(that, clicked);
                }
            }
        });

    });
    return context;
};

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

তাই ব্যবহার করুন:

$('div.my-element').clickOut($('div.my-parent'), function(target) { 
    //do something here...
});

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

// HIDE SEARCH BOX IF CLICKING OUTSIDE
$(document).click(function(event){ 
    // IF NOT CLICKING THE SEARCH BOX OR ITS CONTENTS OR SEARCH ICON 
    if ($("#search-holder").is(":visible") && !$(event.target).is("#search-holder *, #search")) {
        $("#search-holder").fadeOut('fast');
        $("#search").removeClass('active');
    }
});

সার্চ বক্সটি যদি আগে থেকেই দৃশ্যমান হয় তবে এটি চেক করে এবং আমাদের ক্ষেত্রে এটি লুকানো / শো অনুসন্ধান বোতামে একটি সক্রিয় শ্রেণীও সরিয়েছে।


দস্তাবেজে একটি ক্লিক ইভেন্ট শ্রোতা হুক। ইভেন্ট শ্রোতা ভিতরে, আপনি ঘটনা বস্তু , বিশেষ করে event.target কি উপাদান ক্লিক ক্লিক ছিল দেখতে পারেন:

$(document).click(function(e){
    if ($(e.target).closest("#menuscontainer").length == 0) {
        // .closest can help you determine if the element 
        // or one of its ancestors is #menuscontainer
        console.log("hide");
    }
});

$("#menuscontainer").click(function() {
    $(this).focus();
});
$("#menuscontainer").blur(function(){
    $(this).hide();
});

শুধু আমার জন্য কাজ করে।







jquery