JS, клик вне div

361

07 февраля 2018, 11:39

Помогите пожалуйста, хочу понять как реализовать клик вне дива. Нужно переводить фокус с видео на страницу когда производится клик вне видео, также обратно. Тут есть хороший пример с английской версии сайта: https://stackoverflow.com/questions/18893144/javascript-detect-click-event-outside-of-div, но проблема его в том, что див с видео находится в главном контейнере и функция всегда вызывается, так же при клике на видео. Подскажите как реализовать подобное?

Answer 1

var specifiedElement = document.getElementById('a');
//I'm using "click" but it works with any event
document.addEventListener('click', function(event) {
var isClickInside = specifiedElement.contains(event.target);
if (!isClickInside) {
 //the click was outside the specifiedElement, do something
}
});

getElementById - здесь указываешь айдишник элемента в твоем случае это видео

if (!isClickInside) { Здесь то что нужно делать, когда кликнул вне элемента }

Answer 2

Вот примерный код. Можете на jquery переписать. Суть в том, что closest - проверяет, и себе и родителя. Другими словами, если кликнули не посредственно на other_div_2 - true. Если кликнули внутри блока (дочерние элементы) .other_div_2 то всё равно true.

  document.getElementById('js_ckick_container').onclick = function(e) {
    var this_click = e.target;
       if(this_click.closest('.other_div_2')) {
        console.log('Клик внутри other_div_2')
       } else {
        console.log('Клик за пределами other_div_2')
       }
    }

https://jsfiddle.net/yurii_brd/8o7tx0ou/