当应用于 anchor 内的文本框时，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);
}

但是，这不起作用，点击仍然由 anchor 处理并重定向到“error.htm”。

请帮忙，谢谢。

Answer 1

返回 false ( working fiddle )

stopPropagation 仅适用于事件处理程序，不适用于默认行为。

preventDefault 做你想做的事，但返回 false 会触发两者。

更新的 fiddle :

添加$(this).focus()回来之前你应该是金色的。不过，我建议您查看另一种设置 html 的方法，以便 <a>首先不会包装输入。