2011-12-20 2 views
4

Когда вы запустите этот код и нажмите input2, он получит фокус, а .result div выведет "f2" один раз. Но когда вы нажмете input1, скрипт позволит input2 получить фокус, а .result div выведет "f2" дважды, почему?Почему это событие jQuery выполняется дважды?

<!DOCTYPE html> 
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>blank</title> 
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js" type="text/javascript"></script> 
<script type="text/javascript"> 
$(document).ready(function(){ 
    $(".input1").click(function(){$(".input2").focus();}); 
    $(".input2").focus(function(){$(".result").html($(".result").html()+"f2, ");}); 
}); 
</script> 
</head> 

<body> 
    <p> 
     <input class="input1" value="click me to set the input2's focus" /> 
     <input class="input2" value="input2" /> 
     <div class="result"></div> 
    </p> 
</body> 
</html> 
+2

[Она не ведет себя таким образом для меня.] (Http://jsfiddle.net/Pointy/mwShP/) – Pointy

+0

Для меня, это работает правильно: http://jsfiddle.net/FLXfm/ –

+0

@Pointy: [или меня] (http://jsfiddle.net/rbxeN/) (избили меня: P) – Matt

ответ

0

Хотя кажется, что он не реплицируется, я видел, что такая проблема возникает, когда к элементу управления привязаны несколько событий. Это может произойти, когда вы в конечном итоге привязываете событие focus() дважды. Возможно, стоит изучить это и очистить существующие привязки перед кодом.

+0

Unnecceary в этом случае, это явная ошибка в IE, как показано при запуске примеров jsfiddle в IE –

1

Обновление: Исправлено ... переключилось на focusin из фокуса, удалив не получая фокус в ошибке ввода2.

Это, кажется, проблема только с Internet Explorer. Добавьте вызов preventDefault, чтобы исправить проблему с двойным фокусом. Here's a jsFiddle of it working for me.

<!DOCTYPE html> 
<html> 
    <head> 
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
    <title>blank</title> 
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js" type="text/javascript"></script> 
    <script type="text/javascript"> 
     $(document).ready(function(){ 
     $(".input1").click(function(){$(".input2").focus();}); 
     $(".input2").focusin(function(e) 
     { 
     e.preventDefault(); 
     $(".result").html($(".result").html()+"f2, "); 
     }); 
    </script> 
    </head> 

    <body> 
    <p> 
     <input class="input1" value="click me to set the input2's focus" /> 
     <input class="input2" value="input2" /> 
     <div class="result"></div> 
    </p> 
    </body> 
</html> 
+1

Да, но это также предотвращает фактическое фокусирование .input2. :/ – Avaq

+0

Но когда я добавляю preventDefault, вход2 не может получить фокус – csdxf

+0

Ха-ха, я этого не заметил. – scottheckel

Смежные вопросы