Question

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

我想点击div a / b元素时，＆＃34; alert＆＃34;函数不会运行，只是在那两个元素之外点击时运行，而没有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')
  }
});

演示：How does one generate a random number in Apple's Swift language?

Answer 2

您只需检查event.target.id，看看ID是否与两个div id

中的任何一个匹配

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

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中使用，但我不知道它的确切名称。

检测一些元素外部的点击

4 个答案: