使用 JavaScript 检测元素外的点击

Question

我有一些列表项，每个列表项旁边都有一个小框。单击该框后，会显示一些信息。如果在框外单击，我想隐藏框。但我不知道该怎么做。已经有一些帖子与这个问题类似，但他们都在使用 jQuery，但我必须使用纯 JavaScript 完成这项工作

I tried to do following way:

http://jsfiddle.net/kn8hw4tf/1/

Answer 1

聆听

document

上任何地方的点击，并对它们做出反应。 聆听框上的点击，并调用

event.stopPropagation()

这样它们就不会在

document

上击中听众。

document.getElementById('test_id').addEventListener('click', function getDetails(evt) {
    var id = this.getAttribute('id');
    alert("Clicked on " + id);
    evt.stopPropagation();
});

document.addEventListener("click", function (e) {
    alert("Clicked outside");
});