javascript - jquery悬停气泡导致循环闪烁效果

Question

我有冒泡的问题（我认为）

我有一个输入

在悬停时，我将带有单击事件的 div 附加到输入的父级，第二个悬停功能是删除所述附加的 div。

问题是，由于覆盖层位于我要附加的 div 之上，当鼠标悬停在覆盖层上时，会调用鼠标移出函数，然后触发鼠标悬停……等等。

http://jsfiddle.net/N7FFB/

var clear = $('<div class="keyword-clear-icon">').css({
                left            : $('#searchtext').width() - 20,
            }).attr('title','Clear');

$("#dashboard-searchbox #searchtext").hover(
    function(){
        $(clear).click(function(){
            $("input#searchtext").val('');
        });
        $('#dashboard-searchbox').append(clear);
    },
    function(){
       $('#dashboard-searchbox').find('.keyword-clear-icon').remove();
    }
);

有没有达到这种效果的标准方法？

Answer 1

您可以使用search类型输入框，而不是使用 javascript ：

<input id="searchtext" name="SearchText" 
       type="search" placeholder="Anywhere or anything…" />

演示：http: //jsfiddle.net/maniator/N7FFB/1/

Answer 2

只需将悬停应用到#dashboard-searchbox容器即可。

http://jsfiddle.net/N7FFB/2/

Javascript

$("#dashboard-searchbox").hover(
    function(){
        $(clear).click(function(){
            $("input#searchtext").val('');
        });
        $('#dashboard-searchbox').append(clear);
    },
    function(){
       $('#dashboard-searchbox').find('.keyword-clear-icon').remove();
    }
);