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>

Normaly，当用户点击文本框时，页面会重定向到“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（working fiddle）

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

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

更新了小提琴：

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

Answer 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;
});

当应用于锚内的文本框时，jQuery stopPropagation无法正常工作

2 个答案: