Document.onclick() не работает

247
23 февраля 2018, 19:54

При нажатие Document.onclick() работает только Button 2, а при нажатие document.onclick() вообще не закроется в чем проблема?

var s = document.querySelectorAll('button'); 
for (var i = 0; i < s.length; i++) { 
    first(s[i], i); //Работает только Button 2. 
    //second(s[i], i); Работает нормально. 
} 
 
function first(e, i) { 
    document.onclick = function(o) { 
        o.stopPropagation(); 
        if (o.target == e || e.contains(o.target)) { 
            alert('Открылся Select!'); 
        } else { 
            alert('Закрылся Select!'); 
        } 
    } 
} 
function second(e, i) { 
    e.onclick = function(o) { 
        o.stopPropagation(); 
        if (o.target == e || e.contains(o.target)) { 
            alert('Открылся Select!'); 
        } else { 
            alert('Закрылся Select!'); 
        } 
    } 
}
<button>Button 1</button> 
<button>Button 2</button>

UPDATE

При нажатие Button должно Открываться Select, а document наоборот

Попробовал так но все ровно не работает!

document.onclick = function(o) {
    o.stopPropagation();
    o.preventDefault();
    var s = document.querySelectorAll('button');
    for (var i = 0; i < s.length; i++) {
        if (o.target == s[i] || s[i].contains(o.target)) {
            alert('Открылся Select!');
        } else {
            alert('Закрылся Select!');
        }
    }
}
Answer 1

В общем я бы реализовал так....

const select = document.querySelectorAll('.select'); 
const button = document.querySelectorAll('button'); 
for (let i = 0; i < button.length; i++) { 
  button[i].addEventListener('click', function(e) { 
    for (var ii = 0; ii < select.length; ii++) { 
      select[ii].classList.remove('active'); 
 
    } 
    select[i].classList.add('active'); 
    e.stopPropagation(); 
  }) 
} 
document.addEventListener('click', function(e) { 
  for (var i = 0; i < select.length; i++) { 
    select[i].classList.remove('active'); 
  } 
})
.active { 
  background: red; 
}
<button>Button 1</button> 
<button>Button 2</button> 
<div class="select">Допустим это select1</div> 
<div class="select">Допустим это select2</div>

Answer 2

Когда Вы прогоняете функцию second через цикл, то button[i].onclick ==e.onclick. То есть, Вы передаёте метод onclick каждой кнопке . А в функции first в каждом новом цикле document.onclick() меняет своё значение, и по завершению имеет только одно значение, где е==button[s.length-1]==button[1] , Вчера свет вырубили, поэтому не смог ответить. По простому можно, так.

    var s = document.querySelectorAll('button');
for (var i = 0; i < s.length; i++) {
    //first(s[i], i); //Работает только Button 2.
    second(s[i], i); // Работает нормально.
}
function second(e, i) {
    e.onclick = function(o) {
        o.stopPropagation();
        if (o.target == e || e.contains(o.target)) {
            alert('Открылся Select!');
        }
    }
}
document.onclick = function(o) {
    alert('закрылся Select')
}

Просто document.onclick как-то слишком обширно всего лишь для отмены. Подумайте также в сторону addEventListener для document

Answer 3

в чем проблема?

Вы же вызвали функцию first s.length раз. Каждый раз с новым e. Естественно, в результате document.onclick имеет значение равное функции с замыканием, соответствующим последнему e.

Возможно, Вам подойдет document.addEventListener:

document.addEventListener("click", function(){console.log("one")}); 
document.addEventListener("click", function(){console.log("two")});

READ ALSO
Не считывается свойство объекта в JavaScript

Не считывается свойство объекта в JavaScript

В самом конце программы нужны удалить некоторые объекты, но в переменную b не записывается значение свойства endSrv

226
Сместить анимацию, как сделать?

Сместить анимацию, как сделать?

Сместить анимацию, как сделать? Помогите пожалуйста сделать так, чтобы на фоне было вот это изображение и ракета сначала была маленькой рядом...

185
Импорт переменных в js

Импорт переменных в js

ПодскажитеЕсть файл settings

209
Рендер отдельного компонента React

Рендер отдельного компонента React

Постараюсь правильно описать вопрос

238