AddEventListener срабатывает автоматически при назначении

<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 на объект 'document', ссылающийся на функцию clik, а также изменяет отображение идентификатора 'mspop' на block.

Однако при нажатии кнопки " li " назначение addEventlistner clik также запускает clik, несмотря на то, что у меня есть опущены скобки вызова clik () функции.

2 2
javascript onclicklistener addeventlistener

2 ответа:

Добавьте 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 останавливает распространение, так что щелчок по документу не срабатывает.

UPDATE: другой способ - отложить в ближайшее время добавление нового 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);
}
5

Проблема заключается в том, что вы прикрепляете событие click ко всему событию document внутри события click.

Когда метод button click возвращается, событие всплывает и находит только что прикрепленное событие document click. Вам нужно прекратить пузыриться, используя 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>
2