Javascript Обнаружение события click вне div

Ответ 1

В чистом Javascript

Посмотрите эту скрипку и посмотрите, что вам нужно!

document.getElementById('outer-container').onclick = function(e) {
    if(e.target != document.getElementById('content-area')) {
        document.getElementById('content-area').innerHTML = 'You clicked outside.';          
    } else {
        document.getElementById('content-area').innerHTML = 'Display Contents';   
    }
}

http://jsfiddle.net/DUhP6/2/

Ответ 2

Привязать событие onClick к элементу, который находится вне вашей области содержимого, например. тело. Затем внутри события проверьте, является ли цель областью содержимого или прямым или непрямым дочерним элементом области содержимого. Если нет, то предупреждение.

Я сделал функцию, которая проверяет, является ли это дочерним или нет. Он возвращает true, если родительский элемент node является искомым родителем. Если нет, то он проверяет, имеет ли он на самом деле родителя. Если нет, то возвращается false. Если у него есть родительский элемент, но он не найден, он проверяет, является ли родительский родитель искомым родителем.

function isChildOf(child, parent) {
    if (child.parentNode === parent) {
      return true;
    } else if (child.parentNode === null) {
      return false;
    } else {
      return isChildOf(child.parentNode, parent);
    }
}

Также ознакомьтесь с Live Example (content-area = gray)!

Ответ 3

Я сделал простую и небольшую js library, чтобы сделать это для вас:

Он захватывает собственный addEventListener, чтобы создать событие outclick, а также имеет установщик прототипа для .onoutclick

Основное использование

Используя outclick, вы можете регистрировать прослушиватели событий на элементах DOM, чтобы определить, был ли нажат другой элемент, который был этим элементом или другим элементом внутри него. Наиболее частое использование этого в меню.

var menu = document.getElementById('menu')

menu.onoutclick = function () {
    hide(menu)
}

это также можно сделать с помощью метода addEventListener

var menu = document.getElementById('menu')

menu.addEventListener('outclick', function (e) {
    hide(menu)
})

В качестве альтернативы вы также можете использовать атрибут html outclick для запуска события. Это не обрабатывает динамический HTML, и мы не планируем добавлять это, но

<div outclick="someFunc()"></div>

Удачи!

Ответ 4

Node.contains() метод возвращает логическое значение, указывающее, является ли node потомком данного node или нет

Вы можете захватывать события, используя

document.addEventListener("click", clickOutside, false);
function clickOutside(e) {
   const inside = document.getElementById('content-area').contains(e.target);
}

Не забудьте удалить прослушиваемое событие в нужном месте

document.removeEventListener("click", clickOutside, false)

Ответ 5

Используйте document.activeElement, чтобы узнать, какой из ваших html-элементов активен.

Вот ссылка: document.activeElement в MDN

Ответ 6

$('#outer-container').on('click', function (e) {
     if (e.target === this) {
        alert('clicked outside');
     }
});

Это для случая, когда вы нажимаете внутри внешнего контейнера, но вне области содержимого.

Ответ 7

использовать jquery как лучший для доступа к DOM

$(document).click(function(e){
 if($(e.target).is("#content-area") || $(e.target).closest("#content-area").length)
  alert("inside content area");
else alert("you clicked out side content area");
});

Ответ 8

Вот скрипка: http://jsfiddle.net/uQAMm/1/

$('#outercontainer:not(#contentarea)').on('click', function(event){df(event)} );
function df(evenement)
{
    var xstart = $('#contentarea').offset().left;
    var xend = $('#contentarea').offset().left + $('#contentarea').width();

    var ystart = $('#contentarea').offset().top;
    var yend = $('#contentarea').offset().top + $('#contentarea').height(); 

    var xx = evenement.clientX;
    var yy = evenement.clientY;

    if ( !(  ( xx >=  xstart && xx <=  xend ) && ( yy >=  ystart && yy <=  yend )) )
    {
        alert('out');
    }


}

Ответ 9

Поместите это в свой документ:

<script>
document.onclick = function(e) {
  if(e.target.id != 'content-area') alert('you clicked outside of content area');
}
</script>