单击元素外部返回JS错误

Question

我正在尝试制作一个函数，该函数在用户何时单击元素之外。目前，我正在使用以下代码段：

var specifiedElement = document.getElementById('js-search-suggest-wrapper');
document.addEventListener('click', function(event) {
    var isClickInside = specifiedElement.contains(event.target);
    if (!isClickInside) {
        console.log('do something!');
    }
});

}

但是，我似乎会遇到以下错误：usfure typeError：无法读取null的属性'包含'

我的代码有问题，还是我的HTML设置的方式？

Answer 1

由于 specifiedElement为null，因此返回错误，请在html中添加一个元素，并使用id js-search-suggest-wrapper

var specifiedElement = document.getElementById('js-search-suggest-wrapper');
document.addEventListener('click', function(event) {
    var isClickInside = specifiedElement.contains(event.target);
    if (!isClickInside) {
        console.log('do something!');
    }
});

<a id="js-search-suggest-wrapper">javascript</a>

Answer 2

specifiedElement可能是 null 。检查是否存在具有js-search-suggest-wrapper ID的元素。您可以按照以下方式处理空。

var specifiedElement = document.getElementById('js-search-suggest-wrapper');
if (specifiedElement !== null){
  document.addEventListener('click', function(event) {
    var isClickInside = specifiedElement.contains(event.target);
    if (!isClickInside) {
      console.log('do something!');
      }
  });
} else {
  console.log('specifiedElement is null!');
}

<div id="js-search-suggest-wrapper">hello</div>