jQuery通过两个事件隐藏输入-点击和模糊

Question

我正试图通过css转换来获取一个显示和隐藏的输入字段。我已经弄清楚了css和html部分。我希望输入在单击div时切换显示/隐藏。如果输入失去焦点（模糊），我也希望它隐藏起来。

除了第二次单击div之外，它几乎可以正常工作。模糊在单击事件之前激发。因此，blur事件删除了类，而click事件重新应用了类。我相信标准顺序是模糊优先。因此，它基本上是按预期工作的，只是不是所期望的。

有效的状态

1. 单击div，输入显示应用焦点，以便用户可以开始键入
2. 在输入之外单击，输入将隐藏移除焦点

不工作的状态

1. 再次单击div以隐藏输入。模糊事件由于您在输入外部单击而触发。并且，单击事件会重新应用该类。所以，它开始隐藏，但随后又暴露了出来

我相信有办法做到这一点。我的脑子此刻很乱。感谢您的帮助。

$('.clickme').on({
        click: function() {
            $('.wrapper').toggleClass("left");
            if ( $(".wrapper").hasClass("reveal") ) {
                $('.large input').focus();
            }
        }
    });
    $('.large input').on({ blur: function() {
            $('.wrapper').removeClass("reveal");
        }
    });

Answer 1

如果模糊在点击前触发，您可以在模糊处理程序中防止事件冒泡：

event.stopPropagation()