jQuery stopPropagation 在应用于锚点内的文本框时不起作用答案

【问题标题】：jQuery stopPropagation not working when applied to textbox inside anchorjQuery stopPropagation 在应用于锚点内的文本框时不起作用
【发布时间】：2011-03-14 22:02:09
【问题描述】：

希望你能帮助我。我有这样的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”。

请帮忙，谢谢。

【问题讨论】：

首先是什么导致了重定向？也许您可以取消绑定导致重定向的任何事件？
请问为什么a首先包装输入，是否有特定原因为什么在javascript处于活动状态时链接仍然有效？
重定向是由锚点接收点击并执行它的默认操作引起的，我有 99% 的把握。
@Kristoffer：a 是按钮，它应该在用户点击时执行一些操作，特别是它应该检查文本输入的有效性，如果它无效则通知用户，如果是则重定向。
我附加了一个只调用 preventDefault() 的锚点单击处理程序，它处理了锚点重定向问题，但是现在，我可以专注于文本框并让插入符号出现，但我可以'不要选择其中的文本。

标签： jquery html events input anchor

【解决方案1】：

改为返回 false (working fiddle)

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

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

更新小提琴：

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

【讨论】：

如果我在锚点点击函数中返回false，文本框将不会收到点击，因此不会获得焦点。
我放下了锚点，改用了 span。这种方式更容易，span 是惰性标签，所以点击时不会发生意外的事情。谢谢:)
使用此解决方案，输入仍然无法接收鼠标事件，例如更改文本光标位置或文本选择。有人知道如何在 Firefox 中输入锚点吗？
@NPC 前提是有缺陷的，在输入字段周围包装链接必然会产生几个问题，这只是解决了其中一个问题。

【解决方案2】：

在 omittones 的评论后编辑：

为什么不做

$('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;
});

【讨论】：

这不起作用，因为它会阻止文本框接收用户输入。
是的，但用户仍然无法选择文本框中的文本。我正在考虑使用另一个html标签来包装文本框，因为href，我选择了锚点，所以我可以通过锚点的href将数据传输到JS。但这似乎比它的价值更麻烦。