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

jQuery在引用点击时表现不尽如人意

1 个答案: