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

}

但是我似乎得到以下错误：未捕获TypeError：无法读取属性＆＃39;包含＆＃39;为null

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

Answer 1

由于specifiedElement为空，因此返回错误，请在标识为js-search-suggest-wrapper的html中添加元素

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的元素是否存在。您可以通过以下方式处理null。

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>

单击元素外部会返回JS错误

2 个答案: