چطور می‌توان کلیک خارج از یک عنصر را در جاوااسکریپت تشخیص داد؟

در طراحی رابط کاربری، به‌ویژه برای منوها و دیالوگ‌ها، بسیار متداول است که بخواهیم المان ها را وقتی کاربر، خارج از آن‌ها کلیک می‌کند، پنهان کنیم. برای دستیابی به این هدف می‌توان از jQuery یا JavaScript بهره برد.

راه اول هندل کردن رویداد کلیک روی پنجره و انجام عملیات مورد نظر است. اما برای جلوگیری از انجام عملیات برای زمانی که کاربر روی خود المان یا داخل آن کلیک می کند می توانیم با استفاده از stopPropagation در رویداد کلیک المان مورد نظر جلوی این کار را بگیریم:

      $(window).click(function() {
  // انجام عملیات مورد نظر
});

$('#menucontainer').click(function(event){
  event.stopPropagation(); // جلوگیری از اجرای رویداد بالا
});

    

برای پیاده‌سازی این ویژگی، می‌توانیم به یک رویداد کلیک در کل سند (document) گوش دهیم. به کمک متدهایی مانند closest() می‌توان دریاف که آیا عنصر کلیک شده در داخل عنصر هدف ما (مانند منو) قرار گرفته یا خیر. اگر کلیک در خارج از آن باشد، می‌توانیم منو را پنهان کنیم. به‌عنوان مثال:

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

    

در اینجا، با استفاده از closest() می‌سنجیم که آیا عنصر کلیک شده در درون #menucontainer قرار دارد یا خیر. اگر نه، منو پنهان می‌شود.

یکی دیگر از جنبه‌های مهم در طراحی این روش، در نظر گرفتن دسترسی (accessibility) است. کاربران بدون ماوس، مانند کسانی که از صفحه‌کلید استفاده می‌کنند، باید بتوانند با استفاده از کلید Tab به منوها دسترسی پیدا کنند. بنابراین پیاده‌سازی رویدادهای focusout و keydown نیز از اهمیت بالایی برخوردار است. برای مثال:

      $('div').on('focusout', function() {
    $(this).removeClass('active');
});

$(document).keydown(function(e) {
    if (e.which === 27) { // اگر کلید Escape فشرده شود
        $('#menucontainer').removeClass('active');
    }
});

    

با این کار، کاربرانی که از کلید Tab یا کلید Escape استفاده می‌کنند نیز می‌توانند منو را به سادگی ببندند.