Javascript jQuery的问题：不是选择器

我有一个搜索图标，当鼠标悬停在上面时会显示一个输入文本搜索框。我正在使用jQuery向输入中添加一个类，以便在搜索图标悬停时显示文本框。这很好

下一个功能是，如果用户决定不点击搜索框和页面上的其他地方，搜索框就会消失。那也很好

剩下的唯一问题是，如果用户单击搜索框，它也会消失，这是我不希望看到的

我的HTML：

<input type="text" class="form-text text-hidden" title="Enter the terms you wish to search for." value="" size="15" id="edit-search-block-form-1" name="search_block_form" maxlength="128">

<input type="image" src="http://d3j5vwomefv46c.cloudfront.net/photos/large/802431483.png?1377197793" class="form-submit search-hover" alt="Search" id="edit-submit">

请注意，我试图使用

：not

选择器来指示仅在单击搜索框以外的任何位置时删除

hover

类，但该类不起作用

试试看

jQuery(function(){
    $(".search-hover").hover(function () {
        $('.text-hidden').addClass('hover');
    });

    // Now remove the class in case of a false start or the user decides to do something else.
    $("body").click(function(e){
        //alert('The body click is working!!!');
        if($(e.target).closest('.text-hidden').length == 0)
            $('.form-text.text-hidden').removeClass('hover');
    });
})

---

演示：

问题在于，当您单击输入时，主体的单击事件仍然会出现

有一个简单的解决方案。只要在点击输入时停止

---

注意，我已经从JS中删除了

：not selector

。它已经变得不必要了。

太好了，所以它看起来像是

e.target

是

事件的缩写。target

？很不错的。我很好奇

length==0

在这方面也有什么作用。@DannyEnglander

e

是在回调方法中接受事件对象的参数名。。。如果您将参数命名为

event

，则需要使用

event.target

@DannyEnglander此处我们检查click事件的实际目标或其祖先元素之一是否具有类

text hidden

，因此

$（e.target）.closest（'.text hidden'））

将尝试找到这样一个元素，然后我们检查结果的长度，看看它是否真的找到了一个好的元素，我也喜欢这个解决方案。

jQuery(function(){
    $(".search-hover").hover(function () {
        $('.text-hidden').addClass('hover');
    });

    // Now remove the class in case of a false start or the user decides to do something else.
    $("body").click(function(e){
        //alert('The body click is working!!!');
        if($(e.target).closest('.text-hidden').length == 0)
            $('.form-text.text-hidden').removeClass('hover');
    });
})

$(".form-text.text-hidden").click(function(e) {
    e.stopPropagation();
});