jQuery stopPropagation не работает при применении к текстовому полю внутри якоря

Question

надеюсь, ты сможешь мне помочь. У меня есть HTML-разметка, как это:

<a href="error.htm" class="button" id="_uiStart" style="-moz-border-radius: 4px 4px 4px 4px;">
<span>Start</span>
<input type="text" id="_uiCode">
</a>

Обычно, когда пользователь нажимает на текстовое поле, страница перенаправляется на «error.htm». Я хотел предотвратить это, поэтому я использую jQuery для отмены этого:

$(document).ready(function() {
   var mute = function(event){        
       event.stopPropagation();
   };    
   $('a.button input').click(mute)
    .mousedown(mute)
    .mouseup(mute);
}

Однако это не работает, щелчок по-прежнему обрабатывается привязкой и перенаправляет на «error.htm».

Пожалуйста, помогите, спасибо.

Answer 1

Вместо этого вернуть false ( рабочая скрипка )

stopPropagation только для обработчиков событий, не по умолчанию.

preventDefault делает то, что вы хотите, но при возврате ложных срабатывает оба.

Обновленная скрипка:

Добавьте $(this).focus() перед возвратом, и вы должны быть золотыми.Однако я бы посоветовал вам взглянуть на другой способ настройки html, чтобы <a> не заключал в себе входные данные.

Answer 2

отредактировано после комментария омиттонов:

почему бы не сделать

$('a.button input').click(function() { $(this).focus(); return false;});

Это предотвратит нормальное событие.event.stopImmediatePropagation (насколько мне известно, способ остановить распространение) предотвращает всплытие события в иерархии вашего кода.Если это не работает во всех браузерах, просто сделайте оба.

$('a.button input').click(function() {
    $(this).focus(); // added this line after editing
    e.stopImmediatePropagation();
    return false;
});