jQuery模糊，除了某些元素

我已经设置了一个JSFIDLE，代码如下

我只是有一个文本区域，它在焦点上添加了一个类，在模糊上删除了一个类。该类通过设置一个height css属性来扩展textarea，因此当您单击按钮提交表单时，我不希望它删除该类，因为它看起来很笨拙

HTML

<div class="comment_display">
    <form>
        <textarea class="addcomment"></textarea>
        <input class="tagbtn" type="submit" value="Comment" />
    </form>            
</div>​

Javascript

// Lengthen the Discussion input on click
  $(function lengthenInput() {
    $(".addcomment").focus(function() {
        $(this).addClass("addcommentOn");
    });

    $(".addcomment").blur(function() {
        if ($("input.comment").data('clicked') != true) {
            $(this).removeClass("addcommentOn");
        }
    });
  });​

---

尝试使用模糊并不容易，因为它发生在另一个元素上的任何鼠标事件之前

如果您想在用户离开表单时缩小textarea，这里有一个需要额外修改的概念。将

blur

处理程序替换为以下内容：

$('form').on('click', function(evt) {
    var $tgt = $(evt.target);
     if ($tgt.is('input[type="submit"]') || $tgt.is('.addcommentOn')  ) {
          return;
      }else{
           $('.addcommentOn').not($tgt).removeClass("addcommentOn");
      }
})

编辑：还需要修改

focus

handler一次，将更多元素添加到表单中：

 $(".addcomment").focus(function() {
    $('.addcommentOn').removeClass('addcommentOn');
    $(this).addClass("addcommentOn");

});

---

演示（已更新）：

Charlietfl的回答很好，但仍有两种方法可以调用模糊事件：如果您转到浏览器中的另一个选项卡，或者如果您点击

选项卡转到下一个输入。您可以在此处看到我的解决方案和代码片段：


由于子级导致的事件传播而引发该错误。只要防止它。
由于子级导致的事件传播而引发该错误。只要防止它。
由于子级导致的事件传播而引发该错误。只是要阻止它。
如果用户出于任何其他原因（除了单击“提交”按钮外）从字段中消失，您仍然希望删除该类，是吗？是。不应该删除该类的唯一原因是如果用户单击该按钮。这非常有效！当然不会想出那个解决方案，但是非常感谢你的帮助。我现在正试着通过它来拼凑它现在是如何工作的。另外，我将“form”改为“body”，它的工作方式正是我所希望的。ws建议单击body也可能会处理大多数需要收缩元素的场景
 $(".addcomment").focus(function() {
    $('.addcommentOn').removeClass('addcommentOn');
    $(this).addClass("addcommentOn");

});