Обнаруживать щелчок внутри/вне элемента с помощью одного обработчика события

Ответ 1

В JavaScript (через jQuery):

$(function() {
  $("body").click(function(e) {
    if (e.target.id == "myDiv" || $(e.target).parents("#myDiv").length) {
      alert("Inside div");
    } else {
      alert("Outside div");
    }
  });
})

#myDiv {
  background: #ff0000;
  width: 25vw;
  height: 25vh;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="myDiv"></div>

Ответ 2

Здесь один лайнер, который не требует jquery с помощью Node.contains:

// Get arbitrary element with id "my-element"
var myElementToCheckIfClicksAreInsideOf = document.querySelector('#my-element');
// Listen for click events on body
document.body.addEventListener('click', function (event) {
    if (myElementToCheckIfClicksAreInsideOf.contains(event.target)) {
        console.log('clicked inside');
    } else {
        console.log('clicked outside');
    }
});

Если вам интересно узнать о крайнем случае проверки того, является ли клик на самом элементе, Node.contains возвращает true для самого элемента (например, element.contains(element) === true), поэтому этот фрагмент должен всегда работать.

Поддержка браузеров, похоже, охватывает почти все, что соответствует этой странице MDN.

Ответ 3

Используя jQuery и предположим, что у вас есть <div id="foo">:

jQuery(function($){
  $('#foo').click(function(e){
    console.log( 'clicked on div' );
    e.stopPropagation(); // Prevent bubbling
  });
  $('body').click(function(e){
    console.log( 'clicked outside of div' );
  });
});

Изменить: для одного обработчика:

jQuery(function($){
  $('body').click(function(e){
    var clickedOn = $(e.target);
    if (clickedOn.parents().andSelf().is('#foo')){
      console.log( "Clicked on", clickedOn[0], "inside the div" );
    }else{
      console.log( "Clicked outside the div" );
  });
});

Ответ 4

Вместо использования функции jQuery .parents (как предложено в принятом ответе) для этой цели лучше использовать .closest. Поскольку объясняется в jQuery api docs, .closest проверяет пройденный элемент и все его родители, тогда как .parents просто проверяет родителей. Следовательно, это работает:

$(function() {
    $("body").click(function(e) {
        if ($(e.target).closest("#myDiv").length) {
            alert("Clicked inside #myDiv");
        } else { 
            alert("Clicked outside #myDiv");
        }
    });
})

Ответ 5

Как насчет этого?

<style type="text/css">
div {border: 1px solid red; color: black; background-color: #9999DD;
width: 20em; height: 40em;}
</style>

<script type="text/javascript">
function sayLoc(e) {
e = e || window.event;
var tgt = e.target || e.srcElement;

// Get top lef co-ords of div
var divX = findPosX(tgt);
var divY = findPosY(tgt);

// Workout if page has been scrolled
var pXo = getPXoffset();
var pYo = getPYoffset();

// Subtract div co-ords from event co-ords
var clickX = e.clientX - divX + pXo;
var clickY = e.clientY - divY + pYo;

alert('Co-ords within div (x, y): '
+ clickX + ', ' + clickY);
}

function findPosX(obj) {
var curleft = 0;
if (obj.offsetParent) {
while (obj.offsetParent) {
curleft += obj.offsetLeft
obj = obj.offsetParent;
}
} else if (obj.x) {
curleft += obj.x;
}
return curleft;
}

function findPosY(obj) {
var curtop = 0;
if (obj.offsetParent) {
while (obj.offsetParent) {
curtop += obj.offsetTop
obj = obj.offsetParent;
}
} else if (obj.y) {
curtop += obj.y;
}
return curtop;
}

function getPXoffset(){
if (self.pageXOffset) { // all except Explorer
return self.pageXOffset;
} else if (document.documentElement
&& document.documentElement.scrollTop) {// Explorer 6 Strict
return document.documentElement.scrollLeft;
} else if (document.body) { // all other Explorers
return document.body.scrollLeft;
}
}

function getPYoffset(){
if (self.pageYOffset) { // all except Explorer
return self.pageYOffset;
} else if (document.documentElement
&& document.documentElement.scrollTop) {// Explorer 6 Strict
return document.documentElement.scrollTop;
} else if (document.body) { // all other Explorers
return document.body.scrollTop;
}
}
</script>

<div onclick="sayLoc(event);"></div>

(из http://bytes.com/topic/javascript/answers/151689-detect-click-inside-div-mozilla, используя Google.)

Ответ 6

На этот вопрос можно ответить с координатами X и Y и без JQuery:

       var isPointerEventInsideElement = function (event, element) {
            var pos = {
                x: event.targetTouches ? event.targetTouches[0].pageX : event.pageX,
                y: event.targetTouches ? event.targetTouches[0].pageY : event.pageY
            };
            var rect = element.getBoundingClientRect();
            return  pos.x < rect.right && pos.x > rect.left && pos.y < rect.bottom && pos.y > rect.top;
        };

        document.querySelector('#my-element').addEventListener('click', function (event) {
           console.log(isPointerEventInsideElement(event, document.querySelector('#my-any-child-element')))
        });

Ответ 7

Для начальной загрузки 4 это работает для меня.

$(document).on('click', function(e) {
    $('[data-toggle="popover"],[data-original-title]').each(function() {
        if (!$(this).is(e.target) && $(this).has(e.target).length === 0 && $('.popover').has(e.target).length === 0) {
            $(this).popover('hide')
        }
    });
});

рабочая демонстрация по ссылке jsfiddle: https://jsfiddle.net/LabibMuhammadJamal/jys10nez/9/

Ответ 8

В ванильном javaScript - в ES6

(() => {
    document.querySelector('.parent').addEventListener('click', event => {
        alert(event.target.classList.contains('child') ? 'Child element.' : 'Parent element.');
    });
})();

.parent {
    display: inline-block;
    padding: 45px;
    background: lightgreen;
}
.child {
    width: 120px;
    height:60px;
    background: teal;
}

<div class="parent">
    <div class="child"></div>
</div>

Ответ 9

Если вы хотите добавить прослушиватель щелчков в консоли Chrome, используйте этот

document.querySelectorAll("label")[6].parentElement.onclick = () => {console.log('label clicked');}

Ответ 10

Вместо использования тела вы можете создать занавес с z-index из 100 (чтобы выбрать номер) и дать внутреннему элементу более высокий z-index, а все остальные элементы имеют более низкий индекс z, чем занавес.

См. рабочий пример здесь: http://jsfiddle.net/Flandre/6JvFk/

jQuery:

$('#curtain').on("click", function(e) {

    $(this).hide();
    alert("clicked ouside of elements that stand out");

});

CSS

.aboveCurtain
{
    z-index: 200; /* has to have a higher index than the curtain */
    position: relative;
    background-color: pink;
}

#curtain
{
    position: fixed;
    top: 0px;
    left: 0px;
    height: 100%;
    background-color: black;
    width: 100%;
    z-index:100;   
    opacity:0.5 /* change opacity to 0 to make it a true glass effect */
}