logo标签列表

为什么这个jQuery事件会运行两次？

javascriptjqueryevents
4
当您运行此代码并点击 input2 时，它将获得焦点，并且 .result div 将会输出一次 "f2"。但是当您点击 input1 时，脚本会让 input2 获得焦点，并且 .result div 将会输出两次 "f2"，为什么？
<!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
它在我的情况下表现不是那样。 - Pointy
对我来说，这个是正常工作的: http://jsfiddle.net/FLXfm/ - Dominic Goulet
@Pointy: 或者我（你比我快:P） - Matt
哪个浏览器？我已经在Chrome上测试过了，它只输出了一个f2。 - Ido Green
2
在IE中，focus被错误地调用了两次。 - Dominic Goulet
显示剩余3条评论
3个回答
7
1
更新：已修复...从移除焦点切换到focusin，解决了input2无法获取焦点的问题。
这似乎只是Internet Explorer的问题。添加一个preventDefault调用来解决双重焦点问题。这里是我在jsFiddle上工作的链接。
<!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
但是当我添加preventDefault时，input2不能获得焦点。 - csdxf
哈哈，我完全没有注意到。 - scottheckel
我在jsFiddle上也有同样的解决方案，并且在开始在这里发布之前注意到了 :) - Avaq
谢谢，您能解释一下为什么吗？ - csdxf
显示剩余3条评论
0

尽管看起来似乎没有被复制，但我曾经见过这种问题发生在多个事件绑定到控件时。当您最终将焦点()事件绑定两次时，就会出现这种情况。在编写代码之前，清除现有的绑定可能是值得探索的。

在这种情况下是不必要的，这是IE中的一个明显的错误，通过在IE中运行jsfiddle示例可以看到。 - Ian Stanway
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接