1

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

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

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

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

mainElem文本框下方显示的 div在哪里。

这是一个jsFiddle 来说明问题。

4

2 回答 2

2

blur如果您想在显示的 div 中放置“可点击”元素，您将无法使用该事件。解决此问题的一种方法是将您的事件侦听器绑定到更全局的元素，例如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/

于 2013-08-12T22:34:01.383 回答
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));
    });
于 2013-08-12T22:03:16.900 回答