我正在编写一个简单的jQuery插件,只要有焦点,它就会在文本框下动态放置div。我已经能够在所有浏览器中获得恰到好处的位置。
我还必须在文本框的focus
和blur
事件中附加两个事件处理程序。它工作正常,但问题是,即使我们点击它,已放置在文本框下的div也会关闭。现在,为什么它会如此发生才有意义,这是因为文本框失去了焦点,但有没有办法阻止它发生?
我尝试将其附加到模糊事件处理程序 -
if($(mainElem).is(":focus")) return;
其中mainElem
是显示在文本框下方的div。
答案 0 :(得分:2)
如果要在显示的div中放置“可点击”元素,则无法使用blur
事件。解决此问题的一种方法是将事件侦听器绑定到更全局的元素,如document
,然后过滤掉目标。
以下是代码示例:
$(document).on('click', function (e) {
var targetEl = e.target,
parent = $(e.target).parents()[0];
if (relElem[0] === targetEl || self[0] === targetEl || self[0] === parent) {
$(mainElem).show();
} else {
$(mainElem).hide();
}
});
以下是对小提琴的更新:http://jsfiddle.net/9YHKW/6/
答案 1 :(得分:1)
这是我在一段时间内为一个项目拼凑而成的小提琴:http://jsfiddle.net/MYcZx/4/
虽然它不是基于你的小提琴(我道歉),但我相信它的功能与你所寻找的功能大致相同。我的示例不包括输入字段,而是包含值的跨度。虽然我没有管理焦点/模糊,但您可以在跨度中添加tabIndex属性,然后在焦点上添加一个触发器来打开菜单。
var $sub = $('.subscription');
$sub
.on('click', '.remove', function() {
$(this).parent().remove();
})
.on('click', 'li', function(e) {
var $this = $(this),
$parent = $this.parent(),
$options = $parent.children('li'),
$value = $parent.siblings('.value'),
isMulti = $parent.hasClass('multi'),
values = [];
if(!isMulti) {
$options.removeClass('active');
}
$this.toggleClass('active');
$options.filter('.active').each(function() {
values.push($(this).text());
});
$value.text(values.join(', ') || 'select');
$value[(values.length ? 'add' : 'remove') + 'Class']('set');
});
var $clone = $sub.clone(true);
$('.new')
.on('click', function() {
$(this).before($clone.clone(true));
});