检测某些元素外的点击

Question

我一直在寻找一些解决方案来解决这个问题，但没有任何帮助
这是我的 JavaScript 代码

var specifiedElement = document.getElementById('a');
document.addEventListener('click', function(event) {
  var isClickInside = specifiedElement.contains(event.target);
  if (!isClickInside) {
    alert('You clicked outside A and B')
  }
});

div {
  background: #aaa;
  height:2em;
  padding: 1em;
  margin-bottom:10px;
  text-align: center;
}

<div id="a">A</div>
<div id="b">B</div>

（在 JS 小提琴中：https://jsfiddle.net/1zj9dmq7/）

我希望当我单击 div a/b 元素时，“警报”功能将不会运行，仅在单击这 2 个元素之外时运行，并且 没有 jQuery
也许有人可以帮助我，谢谢你

Answer 1

试试这个：

var a = document.getElementById('a');
var b = document.getElementById('b');

document.addEventListener('click', function(event) {
  var isClickInside = a.contains(event.target)||b.contains(event.target);
  if (!isClickInside) {
    alert('You clicked outside A and B')
  }
});

演示：https://jsfiddle.net/1zj9dmq7/1/

Answer 2

您只需检查event.target.id 以查看id 是否与两个div 的id 中的任何一个匹配

var specifiedElement = document.getElementById('a');
document.addEventListener('click', function(event) {
  //var isClickInside = specifiedElement.contains(event.target);
  //console.log(event.target.id);
  if ((event.target.id != 'a') && (event.target.id != 'b')) {
    alert('You clicked outside A and B')
  }
});

div {
  background: #aaa;
  height:2em;
  padding: 1em;
  margin-bottom:10px;
  text-align: center;
}

<div id="a">A</div>
<div id="b">B</div>

Answer 3

使用事件对象获取触发事件的元素的id。如果既不是a也不是b则提醒它

document.addEventListener('click', function(event) {
  if (event.target.id !== 'a' && event.target.id !== 'b') {
    alert('You clicked outside A and B')
  }

});

div {
  background: #aaa;
  height: 2em;
  padding: 1em;
  margin-bottom: 10px;
  text-align: center;
}

<div id="a">A</div>
<div id="b">B</div>

Answer 4

尝试类似focusLost 事件。我确定它在 jQuery 中可用，但我不知道它的确切名称。