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>

第一个自我调用功能将一个点击事件监听器添加到＆＃39; li＆＃39;一个班级的元素＆＃39;检查＆＃39;单击时触发框功能。

点击那个＆＃39; li＆＃39;现在激活盒子功能，盒子功能将点击事件监听器设置为＆＃39;文件＆＃39;对象引用clik函数并更改id＆＃39; mspop＆＃39;阻止。

然而，点击“＆＃39; li＆＃39;尽管我已经省略了函数的clik（）调用括号，但clik的addEventlistner赋值也会触发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);
}

Answer 2

问题是您在点击事件中将click事件附加到整个document。

当按钮单击方法返回时，事件会冒泡并找到刚刚附加的文档单击事件。您需要使用e.stopPropagation()停止冒泡：

<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 = tab_id.getElementsByClassName("check");
        dec_butt[0].addEventListener("click",box);


})();

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


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

</script>

AddEventListener在分配时自动触发

2 个答案: