javascript - jQuery 在点击方面没有按预期表现

Question

我有一个元素，我抓取其内容并交换输入，然后我希望用户能够单击输入(正常输入文本)，但如果他们单击其他任何地方将其交换回来到正文。

但是，即使用户第一次单击页面上的任意位置，单击事件似乎也会触发。我的代码如下，我是否误解了什么？

$(document).ready(function(){ 
   $("#thingy").css('cursor', 'pointer');
   $("#thingy").one("click", function() { 
     var element = $(this);
     element.css('cursor', 'auto');
     element.css('display', 'inline-block');
     element.fadeOut(100, function(){element.html('<input type="text" size="25" value="' + element.text() + '" style="width:' + element.width() + 'px;height:' + element.height() + 'px;border:none;padding:0px;margin:0px;">')}).fadeIn(100);
     $("#thingy").click(function() {
       return false;
     });    
     $(document).click(function() {
         alert("You clicked off the text-box");
         element.html(element.children('input:text').val());
     });
  }); 
}); 

Answer 1

它第一次发出警报的原因是 first click 处理程序(.one() 本身并不 return false; 或 .stopPropgaton()，如下所示:

$(document).ready(function(){ 
   $("#thingy").css('cursor', 'pointer');
   $("#thingy").one("click", function() { 
     var element = $(this);
     element.css('cursor', 'auto');
     element.css('display', 'inline-block');
     element.fadeOut(100, function(){element.html('<input type="text" size="25" value="' + element.text() + '" style="width:' + element.width() + 'px;height:' + element.height() + 'px;border:none;padding:0px;margin:0px;">')}).fadeIn(100);
     $("#thingy").click(function() {
       return false;
     });    
     $(document).click(function() {
         alert("You clicked off the text-box");
         element.html(element.children('input:text').val());
     });
     return false;
  }); 
}); ​

You can test it out here .

更好的方法是使用 blur 事件来代替:

     $("#thingy").click(function() {
       return false;
     });    
     $(document).click(function() {
         alert("You clicked off the text-box");
         element.html(element.children('input:text').val());
     });
     return false;

这样:

     $(element).delegate("input", "blur", function() {
       element.html(element.children('input:text').val());
     });

You can try that version here .