jQuery stopPropagation在应用于内部文本框时不起作用

希望你能帮助我。我有HTML标记是这样的：jQuery stopPropagation在应用于内部文本框时不起作用

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

请帮忙，谢谢。

来源

2011-03-14 omittones

什么是导致重定向的第一个地方？也许你可以解除导致重定向的任何事件？ – 2011-03-14 22:05:29

我可以问为什么'a'首先包装了输入，是否有一个特定的原因，当javascript处于活动状态时链接仍然可以工作？ – 2011-03-14 22:39:34

重定向是由锚点接收点击并执行默认操作引起的，我对此99％确定。 – omittones 2011-03-14 22:41:55

返回FALSE，而不是（working fiddle）

stopPropagation只对事件处理程序，而不是默认的行为。

preventDefault做你想做的，但返回假触发两者。

更新后的提琴：

返回前添加$(this).focus()，你应该是金色的。不过，我会建议你看看另一种设置你的html的方式，这样<a>不会把输入放在首位。

来源

2011-03-14 22:08:09

如果我在定位点击函数中返回false，那么文本框将不会收到点击，因此它不会被关注。 – omittones 2011-03-14 22:32:46

呃，忘了更新@rsplak击败它吧 – 2011-03-14 22:56:24

我放弃了锚点并改用了span。这种方式更简单，跨度是惰性标签，所以点击时不会发生意想不到的事情。谢谢:) – omittones 2011-03-18 10:16:19

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

来源

2011-03-14 22:06:58 rsplak

这不起作用，因为它可以防止文本框接收用户输入。 – omittones 2011-03-14 22:31:27

Touche！修复。 – rsplak 2011-03-14 22:39:00

是的，但用户仍然无法选择文本框中的文本。我正在考虑使用另一个html标签来包装文本框，我选择锚因为href，所以我可以通过锚的href将数据传输到JS。但它似乎比它的价值更麻烦。 – omittones 2011-03-14 23:02:09

jQuery stopPropagation在应用于内部文本框时不起作用

回答

相关问题