javascript - jQuery单击事件丢失后模糊

我有一个textarea字段，我希望在获得焦点时可以扩展，而在失去焦点时可以收缩。这是我的测试代码：

$(function() {
  var rows = parseInt(
    $('textarea[name=details]').attr('rows')
  );

  $('textarea[name=details]').focus(function() {
    $(this).animate({ rows: rows + 10 }, 250);
  }).blur(function(e) {
    $(this).animate({ rows: rows }, 250);
  });
});

小提琴：
http://jsfiddle.net/p0t1pzh7/3/

问题是当文本区域具有焦点时，用户单击了另一个输入元素。
在这种情况下，文本区域会折叠起来，但是单击事件似乎丢失了。

我相信正在发生的事情是blur（）处理程序正在更改页面，从而使单击目标更改位置。由于模糊发生在点击之前，因此实际上发生了点击，但是由于目标已移动位置，因此点击不再击中某个元素。这是在Linux下的Chrome 37.0.2062.120上。

我认为的原因是，如果您在模糊处理程序中注释掉textarea的大小调整，一切都会按预期进行。

小提琴：http://jsfiddle.net/p0t1pzh7/4/

我已经在Google上搜索并搜索了相关问题，并且确实找到了一些有关模糊和单击事件顺序的讨论。通常，解决方案似乎涉及在blur（）操作上添加延迟，或者在另一个页面元素上绑定事件以跟踪正在发生的事情。

这两种方法都相当脆弱且容易出错。这种行为实际上只是一个很好的选择，因此，如果没有“干净”的方法，我宁愿完全放弃它。

作为参考，延迟方法确实有效，如下面的小提琴所示：
http://jsfiddle.net/p0t1pzh7/5/

而且我了解了为什么在点击之前触发了模糊，但是令人惊讶的是，点击事件的目标并未在触发模糊之前“设置”。这是预期的行为，还是在浏览器之间有所不同？

最佳答案

您可以使用setTimeout函数：

$('textarea[name=details]').focus(function() {
  $(this).animate({ rows: rows + 10 }, 250);
}).blur(function(e) {
    setTimeout(function(){
        $(this).animate({ rows: rows }, 250);
    }.bind(this),400);

demo

关于javascript - jQuery单击事件丢失后模糊，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/26090153/