Javascript 单击下方的特定div jQuery时，保持textarea打开，尽管有140个限制

今天早些时候，我发布了一篇关于140字符限制的帖子，这一部分现在已经解决了。 现在，我要做另一件棘手的事情，那就是保持140字符限制控制，并且仍然保持另一个检查，即检查是否单击了div的特定部分，如果单击了div，文本区域应该保持打开状态，即80px高，无论字符限制是否报告140或139等等。但是，如果在这个DIV之外单击，textarea应该返回到它的初始高度19px，如果限制器报告140，否则它将保持打开状态

以下是我的jQuery：

$(".comment-box").focus(function(){
        var parent = $(this).parent();
        $('#' + this.id).css({ 'height' : '80px' });
        $(parent).find('.comment-toolbar').css({ 'display' : 'block' });    
    }),
    $('.comment-toolbar').click(function(e){
        if(e.target == "in_or_out"){
            console.log("inside"); 
            $(".comment-box").css({ 'height' : '80px' }); 
        }
        else{ console.log("outside");  }
    }),
    $('.comment-box').focusout(function(){
        var parent = $(this).parent();
        if($(this).val().length > 0){

        }
        else{
            $('#' + this.id).css({ 'height' : '19px' });
            $(parent).find('.comment-toolbar').css({ 'display' : 'none' }); 
        }
    });

这里有一个JSFIDLE：

---

我可能已经找到了解决你问题的办法。这不是最干净的解决方案，但它很有效。我必须使用鼠标位置来跟踪单击来自bc的位置，

focusout

事件在单击之前触发，除了鼠标位置之外，没有办法知道单击来自哪里

不太“干净”的部分是if语句，我必须使用它来检查单击是否在工具栏的范围内。也许你能想出一个更好的方法来检查

JS:

---

希望这会有所帮助。

无论是否有文本，您是否只是想让注释框在focusout时关闭？$（“#”+this.id）-您可以使用$（this）@exceptionTimecat如果有文本，它应该保持打开状态，例如，如果字符限制为139，这是由长度属性测量的，我希望文本区域保持扩展。但是，如果我单击它正下方的特定DIV，顺便说一句，该DIV的类是.comment工具栏，我希望文本区域保持扩展，即使char limit报告140或低于140，例如139、138等等。但是，如果用户单击DOM上的任何其他位置，如果限制器报告140，则应该恢复正常，否则将保持展开状态。有点复杂。@Pete AFAIK，我需要使用ID而不是对象本身。不太确定，但现在将保持这种方式，谢谢你的建议。你真的应该使用

$（这个）

-皮特是正确的

var mousePos;
var hasFocus = false;//This is used to prevent the window.click from firing after a focus event

jQuery(document).ready(function(){
$(document).mousemove(function(e){
  mousePos = e;
 }); 
});

$(".comment-box").keydown(function () {
  var parent = $(this).parent();
  var text_max = 140;
  var length_reached = $(this).val().length;
  var remaining = text_max - length_reached;

  $(parent).find('.counter').html(remaining);

  if (remaining < 5 || remaining >= text_max) $(parent).find(".btn").prop("disabled", true);
  else $(parent).find(".btn").prop("disabled", false);
});

$(".comment-box").focus(function(e){
        var parent = $(this).parent();
        $('#' + this.id).css({ 'height' : '80px' });
        $(parent).find('.comment-toolbar').css({ 'visibility' : 'visible'});
        hasFocus = true;            
    });


 $('.comment-box').focusout(function(e){
var parent = $(this).parent();

var toolbox = $(parent).find('.comment-toolbar');
var offset = $(toolbox).offset();

    //Check if click occured within toolbar
if(mousePos.pageX >= offset.left && mousePos.pageY >= offset.top && mousePos.pageX <= (offset.left + $(toolbox).width()) && mousePos.pageY <= (offset.top + $(toolbox).height()))
{

}   
else if($(this).val().length > 0){

}
else{
    $('#' + this.id).css({ 'height' : '19px' });
    $(parent).find('.comment-toolbar').css({ 'visibility' : 'hidden' });    
}

hasFocus = false;
});

$(window).click(function(){
console.log('window click');
if(!hasFocus)
{
    for(var i=0;$('.comment-box').length;i++)
    {
        var commentbox = $('.comment-box')[i];
        var toolbox = $('.comment-toolbar')[i];
        var offset = $(toolbox).offset();

        if(mousePos.pageX >= offset.left && mousePos.pageY >= offset.top && mousePos.pageX <= (offset.left + $(toolbox).width()) && mousePos.pageY <= (offset.top + $(toolbox).height()))
        {
            return false;
        }   
        else if($(commentbox).val().length > 0){

        }
        else{
            $(commentbox).css({ 'height' : '19px' });
            $(toolbox).css({ 'visibility' : 'hidden' });    
        }
    }
}
});

.comment-toolbar{
  margin-top: 10px;
  display: block;
  border: 1px solid red; 
  width: 420px; 
  height: 45px;
  float: right; 
  visibility: hidden;/* Use visibility instead of display to show/hide toolbar */
}