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

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

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

<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" ) И предупреждение ( "TWO" )...

ИЛИ ТОЛЬКО

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

Ответы

Ответ 1

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

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

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

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

Демо: jsfiddle.net/5rTLq

Ответ 2

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

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

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

test: http://jsfiddle.net/C3jRr/2/