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

Question

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

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

清晰的图标是一个跨度的字形，其中有一个字形是："我"。:before:

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

x 模糊 (它重新渲染输入视图以验证信息和图标的变化--这使架构保持简单)。我遇到的问题是，通过点击图标，输入会触发一个 blur 然后是图标 click.

你能不能想个办法，要么。

a) 避免触发模糊 -- 我只能想到放弃字体字形，使用背景图片，但我已经在那个位置使用了其他字形来表示必填，无效等，所以这是不可取的。

b) 检测到模糊是由图标造成的，而不是其他原因造成的。

谢谢。

编辑：这里有一个想法，虽然使用setTimeout有点蹩脚。http:/jsfiddle.netferahltd5VR。

Answer 1

虽然你仍然需要通过设置tabindex="-1 "来禁止键盘导航到该链接。

var wasClicked = false;

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

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

这里有一些可能发生的想法和一些方法可以尝试。

Answer 2

事件冒泡

. 看一看 本页 来了解更多关于它的信息。你可以像这样在你的点击处理程序中防止事件冒泡。(如果你使用jQuery，你不需要担心 "IE变体")您也可以尝试添加

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
    }
}

或

并看看是否有效。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()"
    }
}

这是最后一个非常简单的解决方案，灵感来自@Yury的答案。

Answer 3

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