1

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

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

清除图标是一个带有字体字形的跨度:before：

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

输入的验证是在模糊上完成的（它重新渲染输入视图以进行验证消息和图标更改 - 这使架构保持简单）。我遇到的问题是通过单击图标输入触发 ablur然后图标click。

你能想出一种方法吗：

a) 避免触发模糊——我只能想到放弃字体字形并使用背景图像，但我已经在该位置使用其他字形作为必需、无效等，所以这是不受欢迎的

b) 检测到模糊是由图标引起的，而不是其他原因

谢谢。

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

4

3 回答 3

1

考虑使用 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" 来禁用到链接的键盘导航。

于 2013-11-07T22:40:13.190 回答
1

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

这是一个猜测，但也许您正在经历的是所谓的事件冒泡。查看此页面以了解更多信息。您可以像这样在单击处理程序中防止事件冒泡：

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;orevent.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()"
    }
}
于 2013-11-07T22:25:37.627 回答
0

这是受@Yury 回答启发的最后一个非常简单的解决方案：

$('.clearable-icon').mousedown(function() {
    // This happens before blur, so return false and stop propagation.
    return false;
});
于 2013-11-08T00:08:32.660 回答