模糊事件在焦点元素的子元素被点击时触发焦点父元素

我坚持了几个小时。我需要创建一个表单的一部分，如果你点击一个选择，一个复选框字段应该弹出，如果你再次点击其他任何地方，这个字段应该消失。我希望在点击选择后重点关注该字段，但由于某种原因，我的复选框字段不仅在您点击其他任何地方时失去了焦点，即使您点击了INSIDE复选框的标签的。所以问题在于，我正在关注一个元素，在该元素中，我点击了一个标签，并且出于某种原因，我无法弄清楚重点的父元素失去了焦点。模糊事件在焦点元素的子元素被点击时触发焦点父元素

代码：http://jsfiddle.net/RELuL/2/

任何帮助赞赏！

P.S：

只是一些奖金问题:)正如你所看到的，如果你点击选择输入时，显示我的隐藏复选框部分有点晚了，它不会立即显示看起来有点糟糕。任何提示如何优化这个？

编辑：我使用的是Firefox 13.0.1

来源

2012-06-22 skywlkr

你现在可以检查它！ –

对不起，检查什么？ – skywlkr

所以这是一个选择或复选框，你为什么改变它？ – jasssonpet

当您单击<label>时，浏览器会关注关联的输入字段。所以焦点离开父母并进入复选框（并且调用你的blur事件处理程序）。

而不是集中父DIV依靠它就被模糊的，附加一个单击处理文档：

$(document).click(function() { 
    multiSelectUpdate(); 
}); 

$('.multiselect.container').click(function(event) { 
    event.stopPropagation(); // prevent click event from reaching document 
});

此外，在Webkit的点击上<select>不会触发click事件。解决方法是使用焦点事件。

Demo

来源

2012-06-26 03:43:46

这是最好的解决方案，到目前为止，但我已经在我已经打开了选择框，关闭它后，我拆散从文档中点击收听之后，我只绑定点击侦听文件的方式升级，所以它不会运行multiSelectUpdate（）函数，每次我点击页面上的某个地方。谢谢，赏金奖励正在进行中！ – skywlkr

好了两个简单的变化得到了这个工作首先更改点击监听的选择框为mousedown监听器，如下。

$('.multiselector').mousedown(function(event) { 
     event.preventDefault(); 
     currentMulti = $(this).attr('id'); 
     thisOffset = $(this).offset(); 
     $(this).hide(); 
     $('#' + currentMulti + '-container') 
      .css('top', thisOffset.top + 'px').show().attr("tabindex", -1).focus(); 
     $(this).addClass('active'); 
    });

这个触发器在盒子能够出现之前就不会显示。

其次，模糊监听者认为它失去了焦点，当一个孩子得到了焦点，以解决这个变化focusout。

$('.multiselect.container').focusout(function() { 
     multiSelectUpdate(); 
    });

这只有当选择器失去焦点时才会触发，即使当前焦点在选择器的子节点上。

修正了fiddle

享受:)

编辑

出于某种原因，模糊触发FF上多次所以这一轮使用，而不是模糊的鼠标离开工作。

$('.multiselect.container').mouseleave(function() { 
     multiSelectUpdate(); 
    });

来源

2012-06-25 12:22:37 AbstractChaos

我愿意接受它作为一个答案，但你可以看到，您的解决方案不工作完美，因为如果我点击框外，容器犯规失去重心，不会触发事件的内容事件。 – skywlkr

哦哎呀那是错误的版本1秒 – AbstractChaos

现在@skywlkr尝试似乎我说好的更新的笑，它只是火拨弄说好的得到了事件的内容实施 – AbstractChaos

模糊事件在焦点元素的子元素被点击时触发焦点父元素

回答

相关问题