我有一个像这样的 html 标记
<li id="fSearch" class="alwsShown">
<div class="dark overflowHidden" id="fSearchBg">
<input type="text" id="filter" name="" style="width:140px" tabindex="1" class="fullWidth opt resetBorderNShd resetShd" value="" autocomplete="off" title="Search" value=""/>
<span id="stopSearch" class="imgSprite stopSearch displayNone poAbs"></span>
</div>
</li>
用过的jQuery
var test = function() {
var self = this,
$filter = $("#filter"),
$fSearchBg = $("#fSearchBg"),
$stopSearch = $(".stopSearch");
// Blur
$filter.blur(function() {
$filteranimate({
width: "140px"
}, 200, function() {
$fSearchBg.removeClass("light").addClass("dark");
$stopSearch.hide();
});
});
$stopSearch.click(function(event){
$filter.val("");
$(this).hide('fast');
event.preventDefault()
event.stopPropagation();
});
// Focus
$filter.focus(function() {
// animate
$filter.animate({
width: "285px"
}, 200);
$fSearchBg.removeClass("dark").addClass("light");
});
});
在我的情况下,我的输入框的宽度为 140 像素,当用户关注输入框时,我将其设置为 284 像素的动画,当我单击任何地方时,我正在处理模糊事件。现在我的要求是当我点击十字图标时输入框中有一个十字图标,我必须执行一些任务但我不想在点击十字图标时触发模糊。如果已经存在模糊事件,请建议我如何处理点击。