javascript - 如何检测文档中的鼠标点击区域 - jquery - javascript

Question

我有一个包含 div 元素的页面。我想要当我单击该 div 元素的外部区域时，然后将其淡出。

但我不知道如何检测鼠标点击区域。如何检测鼠标点击点是否超出 div 区域？

Answer 1

这不是很复杂 - 您有两个选择：
1.将 onclick 事件分配给外部区域。

<div id="outer" onclick="$("#inner").fadeOut();">
    <div id="inner" onclick="event.cancelBubble=true;/*disable bubling*/">Inner Div</div>
</div>

2.遍历dom并比较event.target( event.srcElement)

   document.addEventListener("click", function(event) {
       var body = document.body;
       var target = event.target!=null?event.target:event.srcElement;
       var inner = document.getElementById("inner");
       while(target!=body) {
         if(target==inner)    //This means our inner element is clicked - or one of its children
           return false;
         target=target.parentNode;   //Go UP in the document tree
       }
       $("#inner").fadeOut();   //If we got here, none of element matched our inner DIV, so fade it out
   }

Answer 2

一种可能的 jQuery 解决方案：

$(document).on("click", function(e) {
    var $div = $("#divId");
    if (!$div.is(e.target) && !$div.has(e.target).length) {
        $div.fadeOut();
    }
});

演示：http: //jsfiddle.net/5Jb5b/

Answer 3

功能点击（e）{

var target = e.target;
var optn = [];
optn.id = target.id; 
optn.optnClass = target.className.split(' ');
optn.optnType = target.optnName.toLowerCase();
optn.parent = target.parentNode; 
return optn;

}

document.body.onclick = function(e) {

elem = clickOn(e);
var option_id = elem.id;
alert( 'option ID: '+option_id); // From id or other properties you can compare and find in which area mouse click occured

};