使用單個事件處理程序檢測元素內部/外部的單擊

Question

假設我的頁面中有一個 div。 如何通過 JavaScript 或 JQuery 檢測用戶點擊 div 內容或 div 內容之外的內容。請幫助提供小代碼片段。 謝謝。

編輯：正如在下面的一個答案中評論的那樣，我只想將一個事件處理程序附加到我的身體上，並且還想知道單擊了哪個元素。

Answer 1

這是一個不需要使用Node.contains的 jquery 的襯里：

// 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 頁面，瀏覽器支持似乎涵蓋了幾乎所有內容。

Answer 2

使用 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>

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

Answer 4

與其使用 jQuery .parents函數（如已接受的答案中所建議的那樣），最好使用.closest來實現此目的。 正如jQuery api 文檔中所解釋的， .closest檢查傳遞的元素及其所有父元素，而.parents僅檢查父元素。 因此，這有效：

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

Answer 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。）

Answer 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')))
        });

Answer 7

在普通的 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>

Answer 8

對於引導程序 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/

Answer 9

如果要在 chrome 控制台中添加點擊偵聽器，請使用此

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

Answer 10

function closePopover(sel) {
    $('body').on('click', function(e) {
        if (!$(event.target).closest(sel+', .popover-body').length) {
            $(sel).popover('hide');
        }
    });
}

closePopover('#elem1'); closePopover('#elem2');

Answer 11

您可以創建一個z-index為 100（選擇一個數字）的窗簾，而不是使用 body，並為內部元素提供更高的z-index ，而所有其他元素的 z-index 都低於窗簾。

請參閱此處的工作示例：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 */
}