Кнопка onclick не срабатывает после поля ввода onchange, когда пользователь сразу нажимает кнопку - PullRequest
Новая
       31

Кнопка onclick не срабатывает после поля ввода onchange, когда пользователь сразу нажимает кнопку

10 голосов
/ 16 июня 2011

У меня есть входной текст с событием onchange, которое вызывает функцию, в которой отображается окно предупреждения.У меня также есть кнопка, чья кнопка вызывает другую функцию.Если пользователь вносит изменения во введенный текст и сразу нажимает кнопку, событие onchange срабатывает, отображая окно с предупреждением, но код в функции для нажатия кнопки не выполняется.Я читал, что это как-то связано с пузырями событий, но я не видел никаких решений.Есть ли решение?Это вообще возможно?

Вот небольшой пример: 

<input type = "text" onchange = "showAlert1()">
<input type = "button" id = "al2" value = "Click Here" onclick = "showAlert2()">

<script type = "text/javascript">

function showAlert1() 
{
    alert("ONE")
}

function showAlert2() 
{
    alert ("TWO");
}

</script>

Обработчик события onclick showAlert2 () не запускается, если было внесено изменение во входное значение, и пользователь сразу щелкает кнопку.Я хочу, чтобы вы что-то записали в поле ввода, нажмите НЕМЕДЛЕННО кнопку, и она запускает

alert ("ONE") И alert ("TWO") ...

ИЛИ ТОЛЬКО

оповещение ("ДВА")

Ответы [ 2 ]

2 голосов
/ 16 июня 2011

Насколько я могу судить, это не проблема с пузырением (что проблема с onchange, но в данном случае это красная сельдь).Проблема заключается в том, что нажатие кнопки после изменения значения поля вызывает blur, в результате чего showAlert1() запускается до срабатывания кнопки onclick.

Вот быстрый пример того, как работает описанный вами способно вы увидите, что это ненадежный хак больше всего на свете.В основном это буферизует выполнение каждой функции, так что кнопка onclick может быть запущена.Однако он падает, если нажать и удерживать кнопку дольше, чем буфер, установленный в каждой функции, с помощью setTimeout(). 

function showAlert1() {
    setTimeout(function(){ alert("ONE") }, 250);
}

function showAlert2() {
    setTimeout(function(){ alert("TWO") }, 250);
}

Демо: jsfiddle.net / 5rTLq

1 голос
/ 16 июня 2011

как насчет этого 

function showAlert1(a) {
    alert(a.value); /* use setTimeout to delay */
}

function showAlert2() {
    alert(document.getElementById('txt').value);
}

тест: http://jsfiddle.net/C3jRr/2/

...