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

它会提醒，即使第一次是第一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。