Question

我正面临一个问题。

<div id="1">
    <div id="2">
    </div>
    <div id="3">
        <div id="4">
        </div>
    </div>
</div>

<div id="others_div">
</div>

我想添加课程＆＃34;隐藏＆＃34;到＆＃34; 1＆＃34;当我点击不是＆＃34; 1＆＃34;也不是其中一个孩子。

现在我正在使用它，但我对解决这个问题缺乏想象力......

document.onclick = function(e)
{
    if(e.target.id!="1")
    {
        $("#1").addClass("hidden");
    }
}

Answer 1

好吧，为了避免e.stopPropagation() （也许你希望那个事件冒泡到其他祖先）你可以检查它是否没有点击#1也没有点击它这样的孩子：

$('body').on('click', function(e) {

     if (!((e.target.id== "1") || $(e.target).closest('#1').length)) {
       $("#1").addClass("hidden");
     }    
  });

Answer 2

您可以使用类似下面的jQuery检查来检查当前元素是否是您的1元素，或者遍历DOM以查看当前目标是否包含在ID为{{1}的元素中}：

通常，您应该avoid using ID attributes that only consists of numbers as they are not valid（ID属性必须以字母开头）。忽略这一点可能会导致CSS或jQuery选择方面的一些问题。

Answer 3

<强> JQuery的

$('body').on( "click", function(e) {
  if(e.target.id !== "1")
    {
        $("#1").addClass("hidden");
    }
});

Answer 4

我想你想要这个

// taken from http://stackoverflow.com/questions/152975/how-to-detect-a-click-outside-an-element

$('html').click(function() {
	//Hide the menus if visible
  alert('hide');
});

$('#one').click(function(event){
    event.stopPropagation();
});

div#one {
  background: yellow;
}

div#others_div {
  background: green;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>

<div id="one">
  div one
  <div id="2">
    div two
  </div>
  <div id="3">
    div three
    <div id="4">
      div four
    </div>
  </div>
</div>

<div id="others_div">
  other div
</div>

测试点击是否在div中及其所有子项

4 个答案: