单击时停止元素消失

Question

我正在编写一个简单的jQuery插件，只要有焦点，它就会在文本框下动态放置div。 我已经能够在所有浏览器中获得恰到好处的位置。

我必须在文本框的focus和blur事件上附加两个事件处理程序。 它工作正常，但问题是，即使我们点击它，已放置在文本框下的div也会关闭。 现在有理由为什么它会如此发生，这是因为文本框失去了焦点，但有没有办法阻止它发生？

我尝试将此附加到模糊事件处理程序 -

if($(mainElem).is(":focus")) return;

其中mainElem是文本框下方显示的div。

这是一个用于说明问题的jsFiddle 。

Answer 1

如果要在显示的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/

Answer 2

这是我在一段时间内为一个项目投入的小提琴： 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));
    });