AddEventListener在分配时自动触发

Question

<style>
#mspop {
    display:none;
}
</style>


<div>
  <ul>
    <li class="check">tem</li>
  </ul>
</div>

<div id="mspop" style="background-color:brown;">
  <div id="mspopinner"><p id="close">close</p><textarea style="margin: 0px; height: 125px; width: 500px;"></textarea>
    <button>submit</button>
  </div>
</div>

<script type="text/javascript">
    (function() {
        var dec_butt = document.getElementsByClassName("check");
        dec_butt[0].addEventListener("click",box);


})();

function box(e){
    var pop = document.getElementById("mspop");
    pop.style.display = "block";
    document.addEventListener("click",clik);
}


function clik(){
    var pop = document.getElementById("mspop");
    if(event.target != pop){
        alert("hi");
        pop.style.display = "none";
    };
};

</script>

第一个自调用函数将"click"事件监听器添加到"li"元素,并使用类"check",在单击时触发box函数.

单击'li'现在激活box函数,box函数将click事件监听器设置为引用clik函数的'document'对象,并将id'mspop'的显示更改为block.

但是,在单击'li'时,clik的addEventlistner赋值也会触发clik,尽管事实上我省略了函数的clik()调用括号.

Answer 1

e.stopPropagation()在box功能结束时添加:

function box(e) {
    var pop = document.getElementById("mspop");
    pop.style.display = "block";
    document.addEventListener("click", clik);
    e.stopPropagation();
}

看到这个小提琴:http://jsfiddle.net/vfyzgv1t/

发生的事情是当你点击你的li元素时,然后将点击传输到容器,依此类推到窗口(所谓的事件冒泡),并且你在文档上添加了一个事件监听器(在你li和窗口之间),它被触发.

此处提出的解决方案会e.stopPropagation停止传播,以便不会触发文档上的单击.

更新:另一种方法是延迟添加新的eventListener:http://jsfiddle.net/vfyzgv1t/1/:

function box(e) {
    var pop = document.getElementById("mspop");
    pop.style.display = "block";

    setTimeout(function() {
        document.addEventListener("click", clik);
    }, 10);
}