Question

我有一个像这样的可清除输入：

+-----------------+
|               x |
+-----------------+

清除图标是:before中带有字体字形的范围：

<wrapper>
   <input>
   <icon span>
</wrapper>

输入的验证在blur上完成（它重新呈现输入视图以进行验证消息和图标更改 - 这使架构保持简单）。我遇到的问题是，点击图标，输入会触发blur，然后触发图标click。

你能想到一种方法：

a）避免触发模糊 - 我只能想到抛弃字体字形并使用背景图像，但我已经在该位置使用其他字形作为必需，无效等因此它是不受欢迎的

b）检测到模糊是由图标引起的而不是其他东西

感谢。

编辑：这是一个想法，但使用setTimeout有点蹩脚：http://jsfiddle.net/ferahl/td5VR/

Answer 1

这里有一些关于可能发生的事情和一些尝试方法的想法：

这是一个猜测，但也许你正在经历的是一种叫做事件冒泡的东西。请查看this page以了解有关它的更多信息。您可以阻止点击处理程序中的事件冒泡，如下所示：

IconElement.onclick = function(event) {
    event = event || window.event // cross-browser event

    if (event.stopPropagation) {
        // W3C standard variant
        event.stopPropagation()
    } else {
        // IE variant
        event.cancelBubble = true
    }
}

（如果您使用的是jQuery，则无需担心“IE变体”）

您还可以尝试添加return false;或event.preventDefault()，看看是否有效。

还有一种方法是检查模糊处理程序中的event.target：

InputElement.onblur = function(event) {
    event = event || window.event // cross-browser event
    var IconElement = [do something to get the element];
    if (event.target == IconElement) {
        // Ignore this blur event, or maybe even call "this.focus()"
    }
}

Answer 2

考虑使用mousedown和mouseup事件来设置/删除标志。 http://jsfiddle.net/td5VR/4/

var wasClicked = false;

$('input').blur(function(){
        $(".results").text(wasClicked ? "was clicked": "wasn't clicked");  
});

$('.something').mousedown(function(){
    wasClicked = true;
}).mouseup(function() {
    wasClicked = false;
});

虽然您仍需要通过设置tabindex =“ - 1”来禁用键盘导航到链接。

Answer 3

这是@ Yury的答案所启发的最终非常简单的解决方案：

$('.clearable-icon').mousedown(function() {
    // This happens before blur, so return false and stop propagation.
    return false;
});

带有清晰图标的输入 - 失去焦点问题

3 个答案: