单击时停止元素消失

时间:2013-08-12 21:55:09

标签: javascript jquery html css position

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

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

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

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

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

这是jsFiddle to illustrate问题。

2 个答案:

答案 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));
    });