Tôi có một số menu HTML, mà tôi hiển thị hoàn toàn khi người dùng nhấp vào phần đầu của các menu này. Tôi muốn ẩn các yếu tố này khi người dùng nhấp bên ngoài khu vực menu.

Là một cái gì đó như thế này có thể với jQuery?

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

LƯU Ý: Sử dụng stopEventPropagation()là điều nên tránh vì nó phá vỡ luồng sự kiện thông thường trong DOM. Xem bài viết này để biết thêm thông tin. Thay vào đó hãy xem xét sử dụng phương pháp này

Đính kèm một sự kiện nhấp chuột vào phần thân tài liệu sẽ đóng cửa sổ. Đính kèm một sự kiện bấm riêng vào thùng chứa dừng lan truyền đến thân tài liệu.

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

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

Bạn có thể lắng nghe một sự kiện nhấp chuộtdocument và sau đó đảm bảo #menucontainerkhông phải là tổ tiên hoặc mục tiêu của phần tử được nhấp bằng cách sử dụng .closest().

Nếu không, phần tử được nhấp nằm ngoài #menucontainervà bạn có thể ẩn nó một cách an toàn.

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

Chỉnh sửa - 2017-06-23

Bạn cũng có thể dọn dẹp sau khi nghe sự kiện nếu bạn có kế hoạch bỏ menu và muốn ngừng nghe các sự kiện. Chức năng này sẽ chỉ dọn sạch trình nghe mới được tạo, duy trì mọi trình nghe nhấp chuột khác document. Với cú pháp ES2015:

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

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

  document.addEventListener('click', outsideClickListener)
}

Chỉnh sửa - 2018-03-11

Đối với những người không muốn sử dụng jQuery. Đây là đoạn mã trên trong vanillaJS đơn giản (ECMAScript6).

function hideOnClickOutside(element) {
    const outsideClickListener = event => {
        if (!element.contains(event.target) && isVisible(element)) { // or use: event.target.closest(selector) === null
          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 

LƯU Ý: Điều này dựa trên nhận xét của Alex để chỉ sử dụng !element.contains(event.target)thay vì phần jQuery.

Nhưng element.closest()hiện tại cũng có sẵn trong tất cả các trình duyệt chính (phiên bản W3C khác một chút so với jQuery). Polyfills có thể được tìm thấy ở đây: Element.closest ()

Chỉnh sửa - 2020-05-21

Trong trường hợp bạn muốn người dùng có thể nhấp và kéo bên trong phần tử, sau đó thả chuột ra bên ngoài phần tử, mà không đóng phần tử:

      ...
      let lastMouseDownX = 0;
      let lastMouseDownY = 0;
      let lastMouseDownWasOutside = false;

      const mouseDownListener = (event: MouseEvent) => {
        lastMouseDownX = event.offsetX
        lastMouseDownY = event.offsetY
        lastMouseDownWasOutside = !$(event.target).closest(element).length
      }
      document.addEventListener('mousedown', mouseDownListener);

Và trong outsideClickListener:

const outsideClickListener = event => {
        const deltaX = event.offsetX - lastMouseDownX
        const deltaY = event.offsetY - lastMouseDownY
        const distSq = (deltaX * deltaX) + (deltaY * deltaY)
        const isDrag = distSq > 3
        const isDragException = isDrag && !lastMouseDownWasOutside

        if (!element.contains(event.target) && isVisible(element) && !isDragException) { // or use: event.target.closest(selector) === null
          element.style.display = 'none'
          removeClickListener()
          document.removeEventListener('mousedown', mouseDownListener); // Or add this line to removeClickListener()
        }
    }

Làm thế nào để phát hiện một nhấp chuột bên ngoài một yếu tố?

Lý do mà câu hỏi này rất phổ biến và có rất nhiều câu trả lời là nó phức tạp. Sau gần tám năm và hàng tá câu trả lời, tôi thực sự ngạc nhiên khi thấy sự chăm sóc ít được dành cho khả năng tiếp cận.

Tôi muốn ẩn các yếu tố này khi người dùng nhấp bên ngoài khu vực menu.

Đây là một nguyên nhân cao quý và là vấn đề thực tế . Tiêu đề của câu hỏi, đó là những gì mà hầu hết các câu trả lời xuất hiện để cố gắng giải quyết vấn đề này có chứa một cá trích đỏ không may.

Gợi ý: đó là từ "nhấp chuột" !

Bạn không thực sự muốn ràng buộc xử lý nhấp chuột.

Nếu bạn ràng buộc bấm trình xử lý để đóng hộp thoại, bạn đã thất bại. Lý do bạn thất bại là không phải ai cũng kích hoạt clickcác sự kiện. Người dùng không sử dụng chuột sẽ có thể thoát khỏi hộp thoại của bạn (và menu bật lên của bạn được cho là một loại hộp thoại) bằng cách nhấn Tabvà sau đó họ sẽ không thể đọc nội dung đằng sau hộp thoại mà không kích hoạt clicksự kiện.

Vì vậy, hãy viết lại câu hỏi.

Làm thế nào để đóng một hộp thoại khi người dùng kết thúc với nó?

Đây là mục tiêu. Thật không may, bây giờ chúng ta cần liên kết userisfinishedwiththedialogsự kiện và ràng buộc đó không đơn giản như vậy.

Vậy làm thế nào chúng ta có thể phát hiện ra rằng người dùng đã kết thúc bằng hộp thoại?

focusout biến cố

Một khởi đầu tốt là xác định xem tiêu điểm có rời khỏi hộp thoại không.

Gợi ý: hãy cẩn thận với blursự kiện, blurkhông tuyên truyền nếu sự kiện bị ràng buộc với giai đoạn sủi bọt!

jQuery focusoutsẽ làm tốt. Nếu bạn không thể sử dụng jQuery, thì bạn có thể sử dụng blurtrong giai đoạn chụp:

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

Ngoài ra, đối với nhiều hộp thoại, bạn sẽ cần cho phép vùng chứa lấy nét. Thêm tabindex="-1"để cho phép hộp thoại nhận tiêu điểm động mà không làm gián đoạn luồng tab.

$('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>

Nếu bạn chơi với bản demo đó trong hơn một phút, bạn sẽ nhanh chóng bắt đầu thấy các vấn đề.

Đầu tiên là liên kết trong hộp thoại không thể nhấp được. Cố gắng nhấp vào nó hoặc tab vào nó sẽ dẫn đến việc đóng hộp thoại trước khi tương tác diễn ra. Điều này là do tập trung vào phần tử bên trong sẽ kích hoạt một focusoutsự kiện trước khi kích hoạt lại một focusinsự kiện.

Cách khắc phục là xếp hàng thay đổi trạng thái trên vòng lặp sự kiện. Điều này có thể được thực hiện bằng cách sử dụng setImmediate(...)hoặc setTimeout(..., 0)cho các trình duyệt không hỗ trợ setImmediate. Sau khi xếp hàng, nó có thể bị hủy bởi sau đó 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>

Vấn đề thứ hai là hộp thoại sẽ không đóng khi liên kết được nhấn lại. Điều này là do hộp thoại mất tiêu điểm, kích hoạt hành vi đóng, sau đó nhấp vào liên kết sẽ kích hoạt hộp thoại để mở lại.

Tương tự như vấn đề trước, trạng thái tập trung cần phải được quản lý. Cho rằng thay đổi trạng thái đã được xếp hàng, đó chỉ là vấn đề xử lý các sự kiện tập trung vào trình kích hoạt hộp thoại:

$('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 Chìa khóa

Nếu bạn nghĩ rằng bạn đã hoàn thành bằng cách xử lý các trạng thái tiêu điểm, bạn sẽ có thể làm nhiều hơn để đơn giản hóa trải nghiệm người dùng.

Đây thường là một tính năng "tốt để có", nhưng thông thường là khi bạn có một chế độ hoặc cửa sổ bật lên của bất kỳ loại nào mà Esckhóa sẽ đóng nó.

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>

Nếu bạn biết bạn có các yếu tố có thể tập trung trong hộp thoại, bạn sẽ không cần phải tập trung trực tiếp vào hộp thoại. Nếu bạn đang xây dựng một menu, bạn có thể tập trung vào mục menu đầu tiên.

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.

Vai trò WAI-ARIA và hỗ trợ tiếp cận khác

Câu trả lời này hy vọng bao gồm những điều cơ bản về hỗ trợ bàn phím và chuột có thể truy cập được cho tính năng này, nhưng vì nó khá dễ hiểu nên tôi sẽ tránh mọi cuộc thảo luận về vai trò và thuộc tính của WAI-ARIA , tuy nhiên tôi rất khuyến nghị người thực hiện tham khảo thông số kỹ thuật để biết chi tiết về vai trò nào họ nên sử dụng và bất kỳ thuộc tính thích hợp nào khác.

Các giải pháp khác ở đây không hiệu quả với tôi nên tôi phải sử dụng:

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

Tôi có một ứng dụng hoạt động tương tự như ví dụ của Eran, ngoại trừ tôi đính kèm sự kiện nhấp chuột vào phần thân khi tôi mở menu ... Loại như thế này:

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

  event.stopPropagation();
});

Thêm thông tin về chức năng của jQueryone()

Sau khi nghiên cứu tôi đã tìm thấy ba giải pháp làm việc (tôi quên các liên kết trang để tham khảo)

Giải pháp đầu tiên

<script>
    //The good thing about this solution is it doesn't stop event propagation.

    var clickFlag = 0;
    $('body').on('click', function () {
        if(clickFlag == 0) {
            console.log('hide element here');
            /* Hide element here */
        }
        else {
            clickFlag=0;
        }
    });
    $('body').on('click','#testDiv', function (event) {
        clickFlag = 1;
        console.log('showed the element');
        /* Show the element */
    });
</script>

Giải pháp thứ hai

<script>
    $('body').on('click', function(e) {
        if($(e.target).closest('#testDiv').length == 0) {
           /* Hide dropdown here */
        }
    });
</script>

Giải pháp thứ ba

<script>
    var specifiedElement = document.getElementById('testDiv');
    document.addEventListener('click', function(event) {
        var isClickInside = specifiedElement.contains(event.target);
        if (isClickInside) {
          console.log('You clicked inside')
        }
        else {
          console.log('You clicked outside')
        }
    });
</script>

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

Làm việc cho tôi tốt

Bây giờ có một plugin cho điều đó: các sự kiện bên ngoài ( bài đăng trên blog )

Sau đây sẽ xảy ra khi một clickoutside handler (wlog) được liên kết với một yếu tố:

• phần tử được thêm vào một mảng chứa tất cả các phần tử với trình xử lý clickoutside
• một trình xử lý nhấp chuột (được đặt tên ) được liên kết với tài liệu (nếu chưa có)
• trên bất kỳ nhấp chuột nào trong tài liệu, sự kiện clickout được kích hoạt cho các thành phần đó trong mảng đó không bằng hoặc là cha mẹ của mục tiêu nhấp chuột
• ngoài ra, event.target cho sự kiện clickoutide được đặt thành phần tử mà người dùng đã nhấp vào (để bạn thậm chí biết người dùng đã nhấp vào cái gì, không chỉ là anh ta nhấp vào bên ngoài)

Vì vậy, không có sự kiện nào được dừng từ việc truyền bá và các trình xử lý nhấp chuột bổ sung có thể được sử dụng "bên trên" phần tử với trình xử lý bên ngoài.

Điều này làm việc cho tôi hoàn hảo !!

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

Tôi không nghĩ những gì bạn thực sự cần là đóng menu khi người dùng nhấp vào bên ngoài; những gì bạn cần là để menu đóng khi người dùng nhấp vào bất cứ nơi nào trên trang. Nếu bạn bấm vào menu, hoặc tắt menu thì nó sẽ đóng phải không?

Tìm thấy không có câu trả lời thỏa đáng ở trên đã thôi thúc tôi viết bài đăng blog này vào ngày khác. Đối với nhiều phạm vi hơn, có một số vấn đề cần lưu ý:

1. Nếu bạn đính kèm một trình xử lý sự kiện nhấp vào phần tử cơ thể tại thời điểm nhấp, hãy chắc chắn đợi lần nhấp thứ 2 trước khi đóng menu và hủy liên kết sự kiện. Nếu không, sự kiện nhấp đã mở menu sẽ tạo ra bong bóng cho người nghe phải đóng menu.
2. Nếu bạn sử dụng event.stopPropogation () trên một sự kiện nhấp chuột, không có yếu tố nào khác trong trang của bạn có thể có tính năng nhấp vào bất cứ nơi nào để đóng.
3. Đính kèm một trình xử lý sự kiện nhấp vào phần tử cơ thể vô thời hạn không phải là một giải pháp biểu diễn
4. So sánh mục tiêu của sự kiện và cha mẹ của nó với người tạo của trình xử lý giả định rằng điều bạn muốn là đóng menu khi bạn nhấp vào nó, khi điều bạn thực sự muốn là đóng nó khi bạn nhấp vào bất cứ đâu trên trang.
5. Lắng nghe các sự kiện trên phần tử cơ thể sẽ làm cho mã của bạn dễ vỡ hơn. Kiểu dáng ngây thơ như thế này sẽ phá vỡ nó:body { margin-left:auto; margin-right: auto; width:960px;}

Như một poster khác cho biết có rất nhiều vấn đề, đặc biệt là nếu yếu tố bạn đang hiển thị (trong trường hợp này là menu) có các yếu tố tương tác. Tôi đã tìm thấy phương pháp sau khá mạnh mẽ:

$('#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);
        }

    })
});

Một giải pháp đơn giản cho tình huống này là:

$(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();
    }
});

Kịch bản trên sẽ ẩn divnếu bên ngoài divsự kiện nhấp được kích hoạt.

Bạn có thể xem blog sau để biết thêm thông tin: http://www.codecanal.com/detect-click-outside-div-USE-javascript/

Giải pháp1

Thay vì sử dụng event.stopPropagation () có thể có một số tác dụng phụ, chỉ cần xác định một biến cờ đơn giản và thêm một ifđiều kiện. Tôi đã thử nghiệm điều này và làm việc đúng cách mà không có bất kỳ tác động phụ nào của stopPropagation:

var flag = "1";
$('#menucontainer').click(function(event){
    flag = "0"; // flag 0 means click happened in the area where we should not do any action
});

$('html').click(function() {
    if(flag != "0"){
        // Hide the menus if visible
    }
    else {
        flag = "1";
    }
});

Giải pháp2

Chỉ với một ifđiều kiện đơn giản :

$(document).on('click', function(event){
    var container = $("#menucontainer");
    if (!container.is(event.target) &&            // If the target of the click isn't the container...
        container.has(event.target).length === 0) // ... nor a descendant of the container
    {
        // Do whatever you want to do when click is outside the element
    }
});

Kiểm tra mục tiêu sự kiện nhấp vào cửa sổ (nó sẽ truyền đến cửa sổ, miễn là nó không bị bắt ở bất kỳ nơi nào khác) và đảm bảo rằng đó không phải là bất kỳ thành phần nào trong menu. Nếu không, thì bạn ở ngoài menu của bạn.

Hoặc kiểm tra vị trí của nhấp chuột và xem nó có trong khu vực menu không.

Tôi đã thành công với những thứ như thế này:

var $menuscontainer = ...;

$('#trigger').click(function() {
  $menuscontainer.show();

  $('body').click(function(event) {
    var $target = $(event.target);

    if ($target.parents('#menuscontainer').length == 0) {
      $menuscontainer.hide();
    }
  });
});

Logic là: khi #menuscontainerđược hiển thị, liên kết một trình xử lý nhấp chuột vào phần thân #menuscontainerchỉ ẩn nếu mục tiêu (của nhấp chuột) không phải là con của nó.

Là một biến thể:

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();
    }
});

Không có vấn đề gì với việc dừng lan truyền sự kiện và hỗ trợ tốt hơn cho nhiều menu trên cùng một trang trong đó nhấp vào menu thứ hai trong khi mở đầu tiên sẽ để mở đầu tiên trong giải pháp stopPropagation.

Sự kiện này có một thuộc tính được gọi là event.path của phần tử là "danh sách thứ tự tĩnh của tất cả tổ tiên của nó theo thứ tự cây" . Để kiểm tra xem một sự kiện có nguồn gốc từ một phần tử DOM cụ thể hoặc một trong những phần tử con của nó, chỉ cần kiểm tra đường dẫn cho phần tử DOM cụ thể đó. Nó cũng có thể được sử dụng để kiểm tra nhiều phần tử bằng cách sử dụng logic ORkiểm tra phần tử trong somehàm.

$("body").click(function() {
  target = document.getElementById("main");
  flag = event.path.some(function(el, i, arr) {
    return (el == target)
  })
  if (flag) {
    console.log("Inside")
  } else {
    console.log("Outside")
  }
});

#main {
  display: inline-block;
  background:yellow;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="main">
  <ul>
    <li>Test-Main</li>
    <li>Test-Main</li>
    <li>Test-Main</li>
    <li>Test-Main</li>
    <li>Test-Main</li>
  </ul>
</div>
<div id="main2">
  Outside Main
</div>

Vì vậy, đối với trường hợp của bạn.

$("body").click(function() {
  target = $("#menuscontainer")[0];
  flag = event.path.some(function(el, i, arr) {
    return (el == target)
  });
  if (!flag) {
    // Hide the menus
  }
});

Tôi tìm thấy phương pháp này trong một số plugin lịch 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);

Đây là giải pháp JavaScript vanilla cho người xem trong tương lai.

Khi nhấp vào bất kỳ phần tử nào trong tài liệu, nếu id của phần tử được nhấp được bật hoặc phần tử ẩn không bị ẩn và phần tử ẩn không chứa phần tử được nhấp, hãy chuyển phần tử.

(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>

Nếu bạn sắp có nhiều toggles trên cùng một trang, bạn có thể sử dụng cái gì đó như thế này:

1. Thêm tên lớp hiddenvào mục đóng mở.
2. Khi nhấp vào tài liệu, hãy đóng tất cả các phần tử ẩn không chứa phần tử được nhấp và không bị ẩn
3. Nếu phần tử được nhấp là chuyển đổi, hãy chuyển phần tử đã chỉ định.

(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>

Tôi ngạc nhiên không ai thực sự thừa nhận focusoutsự kiện:

var button = document.getElementById('button');
button.addEventListener('click', function(e){
  e.target.style.backgroundColor = 'green';
});
button.addEventListener('focusout', function(e){
  e.target.style.backgroundColor = '';
});

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
</head>
<body>
  <button id="button">Click</button>
</body>
</html>

Nếu bạn đang viết kịch bản cho IE và FF 3. * và bạn chỉ muốn biết liệu nhấp chuột có xảy ra trong một khu vực hộp nhất định hay không, bạn cũng có thể sử dụng một cái gì đó như:

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;}

Thay vì sử dụng gián đoạn dòng chảy, sự kiện làm mờ / lấy nét hoặc bất kỳ kỹ thuật phức tạp nào khác, chỉ cần khớp luồng sự kiện với mối quan hệ của phần tử:

$(document).on("click.menu-outside", function(event){
    // Test if target and it's parent aren't #menuscontainer
    // That means the click event occur on other branch of document tree
    if(!$(event.target).parents().andSelf().is("#menuscontainer")){
        // Click outisde #menuscontainer
        // Hide the menus (but test if menus aren't already hidden)
    }
});

Để loại bỏ nhấp vào bên ngoài trình nghe sự kiện, chỉ cần:

$(document).off("click.menu-outside");

Sử dụng:

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();
});

Nếu ai đó tò mò ở đây là giải pháp javascript (es6):

window.addEventListener('mouseup', e => {
        if (e.target != yourDiv && e.target.parentNode != yourDiv) {
            yourDiv.classList.remove('show-menu');
            //or yourDiv.style.display = 'none';
        }
    })

và es5, chỉ trong trường hợp:

window.addEventListener('mouseup', function (e) {
if (e.target != yourDiv && e.target.parentNode != yourDiv) {
    yourDiv.classList.remove('show-menu'); 
    //or yourDiv.style.display = 'none';
}

});

Đây là một giải pháp đơn giản bằng javascript thuần túy. Nó được cập nhật với ES6 :

var isMenuClick = false;
var menu = document.getElementById('menuscontainer');
document.addEventListener('click',()=>{
    if(!isMenuClick){
       //Hide the menu here
    }
    //Reset isMenuClick 
    isMenuClick = false;
})
menu.addEventListener('click',()=>{
    isMenuClick = true;
})

Móc một người nghe sự kiện bấm vào tài liệu. Bên trong trình nghe sự kiện, bạn có thể nhìn vào đối tượng sự kiện , cụ thể là event.target để xem phần tử nào được nhấp:

$(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");
    }
});

Tôi đã sử dụng kịch bản dưới đây và thực hiện với jQuery.

jQuery(document).click(function(e) {
    var target = e.target; //target div recorded
    if (!jQuery(target).is('#tobehide') ) {
        jQuery(this).fadeOut(); //if the click element is not the above id will hide
    }
})

Dưới đây tìm mã HTML

<div class="main-container">
<div> Hello I am the title</div>
<div class="tobehide">I will hide when you click outside of me</div>
</div>

Bạn có thể đọc hướng dẫn ở đây

$(document).click(function() {
    $(".overlay-window").hide();
});
$(".overlay-window").click(function() {
    return false;
});

Nếu bạn nhấp vào tài liệu, ẩn một phần tử đã cho, trừ khi bạn nhấp vào phần tử đó.

Upvote cho câu trả lời phổ biến nhất, nhưng thêm

&& (e.target != $('html').get(0)) // ignore the scrollbar

vì vậy, một nhấp chuột trên thanh cuộn không [ẩn hoặc bất cứ thứ gì] phần tử mục tiêu của bạn.

Để sử dụng dễ dàng hơn và mã biểu cảm hơn, tôi đã tạo một plugin jQuery cho việc này:

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

Lưu ý: mục tiêu là yếu tố người dùng thực sự nhấp vào. Nhưng gọi lại vẫn được thực hiện trong ngữ cảnh của phần tử gốc, vì vậy bạn có thể sử dụng điều này như bạn mong đợi trong một cuộc gọi lại jQuery.

Cắm vào:

$.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;
};

Theo mặc định, trình nghe sự kiện nhấp được đặt trên tài liệu. Tuy nhiên, nếu bạn muốn giới hạn phạm vi trình nghe sự kiện, bạn có thể chuyển vào một đối tượng jQuery đại diện cho một phần tử mức cha mẹ sẽ là phần tử cha mẹ hàng đầu mà tại đó các nhấp chuột sẽ được lắng nghe. Điều này ngăn chặn người nghe sự kiện cấp tài liệu không cần thiết. Rõ ràng, nó sẽ không hoạt động trừ khi phần tử cha được cung cấp là phần tử mẹ của phần tử ban đầu của bạn.

Sử dụng như vậy:

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