非常简单的JS:
$(".input").focus(function(){
alert("input clicked");
});
HTML:
<textarea class="input" style="height:20px" cols="60"></textarea>
在Chrome中收到了很多警报,但在FF中,一切都很好
如果我使用"点击"而不是"聚焦",那么在Chrome中,非常温和地聚焦文本区域不会启动警报框,但它确实会聚焦。我测试了焦点,并更改了一些默认文本(代码中没有提到)。
我想做一个状态更新框,就像Facebook一样。当用户聚焦文本区域时,它将以新内容水平展开。
Chrome和所有其他浏览器的行为方式相同(只产生一次警报)?
我相信它可能是这样的:您在文本区域中单击,它将被聚焦,并调用事件侦听器。显示警告框会导致文本区域在显示该框时失去焦点。当您取消警报框时,文本区域将变为焦点,并再次调用事件侦听器。
如果是这种情况,并且Chrome是唯一一个这样做的浏览器,那么提交错误报告可能是个好主意。
更新:并解决您的问题。你确定你需要警报框吗?这通常是个坏主意,最好使用其他(非阻塞)警报机制。
据我所知,你不需要这个盒子。只需展开文本区域,而不显示警告框。并使用console.log
进行调试。
我推测Chrome处理警报框的方式有一个小错误。当你关注文本区域时,它会触发警报框,警报框会立即获得焦点(从而从文本区域获得焦点)。当您单击"确定"以解除警报时,文本区域会重新获得焦点,但在Chrome中,它似乎会再次触发focus
事件,从而导致UI循环。
这种情况似乎只有在你启动警报框的情况下才会发生。如果用console.log("input clicked")
替换警报(例如),您将在JS控制台中看到该事件只触发一次。使用focus
可以很好地完成您想要完成的任务;你刚刚发现了一个奇怪的浏览器错误。
编辑
如果让使用警报框,请尝试:
var alerted = false;
$(".input").focus(function() {
if(!alerted) {
alert("input clicked");
alerted = true;
}
});
这只会触发一次,但在页面的生存期内(或者直到您将alerted
设置为false
),这也可能不是所需的行为。建议使用console.log
进行调试,在大多数情况下避免使用alert
。
您可以使用click
事件,而不是像本例那样使用focus
事件。。。
<textarea rows="3" class="input" style="height: 20px" cols="60"></textarea>
<script language="javascript" type="text/javascript">
$(".input").click(function () {
alert("input clicked");
$(this).focus();
});
</script>
现在它在所有浏览器中都能成功工作。。。。