jQuery悬停气泡导致循环闪烁效果

jquery hover bubble causing a looping blinking effect

本文关键字：闪烁 循环 悬停 气泡 jQuery      更新时间：2023-09-26

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

我有一个输入

在悬停时，我将带有单击事件的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();
    }
);

有没有达到这种效果的性病方法？

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

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

爪哇语

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

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

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

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

相关文章：