jQuery stopPropagation在应用于锚点中的文本框时不起作用 [英] jQuery stopPropagation not working when applied to textbox inside anchor

问题描述

希望你能帮助我。我有这样的html标记：

 < a href =error.htmclass =buttonid =_ uiStart style = -  moz-border-radius：4px 4px 4px 4px;> 
< span>开始< / span> 
< input type =textid =_ uiCode> 
< / a>通常，当用户点击文本框时，页面重定向到error.htm。
  

我想防止这样，所以我使用jQuery取消：

  $（document）.ready（function（）{
 var mute = function（event）{
 event.stopPropagation（）; 
}; 
 $（'a.button input'）点击（静音）
。 （静音）
 .mouseup（静音）; 
} 
  

不工作，点击仍然被锚点处理并重定向到error.htm。

请帮助，谢谢。

解决方案

返回false（工作小提琴 ）

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

preventDefault 做你想要的，但返回false触发器。

更新小提琴

添加 $（this）.focus（）在回来之前，你应该是金色的。然而，我建议您看另一种设置您的HTML的方式，所以< a> 不会首先包装输入。

hope you can help me. I have html markup like this:

<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>

Normaly, when user clicks on the textbox, the page redirects to "error.htm". I wanted to prevent that so I use jQuery to cancel that:

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

However, this does not work, the click still gets processed by anchor and redirects to "error.htm".

Please help, thank you.

解决方案

Return false instead (working fiddle)

stopPropagation is only for event handlers, not default behavior.

preventDefault does what you want, but returning false triggers both.

Updated fiddle:

Add $(this).focus() before returning and you should be golden. I would however suggest you look at another way of setting up your html so the <a> doesn't wrap the input in the first place.

这篇关于jQuery stopPropagation在应用于锚点中的文本框时不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！