如何实现点击指定元素（A/B）外触发事件且不使用jQuery

没问题，我帮你调整一下代码～你现在的逻辑只判断了点击是否在A元素内，没把B元素算进去，所以点击B的时候还是会触发alert。我们只需要把B也加入判断条件就行：

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

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

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

document.addEventListener('click', function(event) {
  var isClickInsideA = specifiedElementA.contains(event.target);
  var isClickInsideB = specifiedElementB.contains(event.target);
  
  // 只有当点击既不在A内也不在B内时，才触发alert
  if (!isClickInsideA && !isClickInsideB) {
    alert('You clicked outside A and B')
  }
});

逻辑说明 #

• 先分别获取A和B两个元素的DOM节点
• 同时判断点击目标是否在A或者B内部，只要属于其中一个元素的范围，就不执行alert
• 只有当点击位置既不在A内，也不在B内时，才会触发提示框

这样修改后就完全符合你的需求啦，点击A或B都不会触发alert，只有点击这两个元素之外的区域才会弹出提示，全程没有使用jQuery。

内容的提问来源于stack exchange，提问作者Dafiul Haq