Javascript 当用户在表单外部单击时使用jQuery

我有一个带有输入字段的表单和一个按钮，当你聚焦在任何字段时，它会淡入淡出

我想让按钮消失时，用户点击的地方以外的形式。 只对输入元素进行模糊是不起作用的。一旦您将焦点从输入文本字段移开以按下提交按钮，该按钮就会消失，因此您无法按下该按钮。 我试图在表单上使用模糊方法，但似乎效果不太好

谢谢你的帮助

$("#add_wall").click(function(){
    $("#new_wall").animate({
        opacity: 1,
        width: '350'
    }, 500, function() {
        $("#send_button").fadeIn(400);
    });
}); 

形状看起来像

<form id="add_wall">
    <input id="new_wall" type="text"  placeholder="Compose new message..." />
    <button id="send_button" style="width:60px; margin-left:5px;" >Post</button>
</form>

邮递

可能：

$('body').on('click',function(e){
    var targetTagName = e.target.tagName.toLowerCase();
    if (targetTagName == 'input'){
        $('#send_button').fadeIn(500);
    }
    else if (targetTagName !== 'form'){
        $('#send_button').fadeOut(500);
    }
});​

---

.

您应该将字段本身设置为具有

.focus（）

侦听器，而不是包装

Blur应该在球场上工作。你不能从没有焦点的东西（比如

我不知道当有人在表单上“点击”时，你想对你的字段做什么（不是与表单的可靠交互），所以我现在将忽略这一点。但是，你的字段应该带有焦点和模糊事件，而你的按钮应该有相应的响应

编辑：基于我愚蠢的疏忽

那么我的处理方式是：

$('#new_wall').focus( function(){
    $("#send_button").fadeIn(400); // Button shows on focus

    // Create a temporary listener on the body to let someone 'click off'
    $('body').on('click.send_button_showing', function(){
        // User clicks off, button fades out, loses event, and body loses event
        $('#send_button').fadeOut(400);
        $('#send_button').off('click.send_button_click');
        $('body').off('click.send_button_showing');
    });

    // Create temporary event that stops bubbling of the body click 
    // with .stopPropagation()
    $('#send_button').on( 'click.send_button_click', function(e){
        e.stopPropagation();
        // Do your send button actions
    });
});

您可以使用
$.hover
设置/取消设置窗体上的隐藏属性，然后当用户单击任何内容时，您可以查看该窗体的属性。如下所示：

$('form').hover(function(){ 
      $('form').attr('animate_me',false); 
}, function(){
      $('form').attr('animate_me',true); 
});

$(document).click(function(){
      if($('form').attr('animate_me')===false) return;
      // you can hide your button here.
});

这可能是一个与你所寻找的相似的经历：


//出示表格

function showForm() {
    theField.stop().animate({
        opacity: 1,
        width: '350'
    }, 500, function() {
        theButton.fadeIn(400);
    });
}

//隐藏表格

function hideForm() {
    if (!theField.is(":focus") && !theButton.is(":focus")) {
        theField.stop().animate({
            opacity: 1,
            width: '110'
        }, 500, function() {
            theButton.fadeOut(400);
        });
    }
}
theForm.click(showForm).mouseenter(showForm).mouseleave(hideForm);
theField.blur(hideForm)

​

我不确定默认情况下使用的不透明度等。这肯定会起作用。
但问题是，我希望能够单击该按钮。这与我想要的东西非常相似，但我只会在单击该字段时将其展开。如果我删除。mouseenter（showForm）它会产生一些问题，比如如果用户在输入字段中写入内容，然后将鼠标移到表单外，按钮将消失。但是关闭。
function showForm() {
    theField.stop().animate({
        opacity: 1,
        width: '350'
    }, 500, function() {
        theButton.fadeIn(400);
    });
}

function hideForm() {
    if (!theField.is(":focus") && !theButton.is(":focus")) {
        theField.stop().animate({
            opacity: 1,
            width: '110'
        }, 500, function() {
            theButton.fadeOut(400);
        });
    }
}
theForm.click(showForm).mouseenter(showForm).mouseleave(hideForm);
theField.blur(hideForm)