Question

我使用带有输入控件的Bootstrap下拉功能，允许用户从列表中选择预定义值或输入任意新值。使用jQuery我附加了一个模糊事件，这样当用户在输入外部点击它时，它可以做一个最小的语法＆＃39;检查它是否是允许值。如果是这样，则会触发AJAX事件以更新用户配置文件中的该值。

如果该输入控件当前专注于输入它（已打开Bootstrap下拉列表），如果再次单击它，例如单击以移动文本光标以编辑输入的值，即使它正在触发的输入控件正在保持焦点，附加的模糊事件也会触发。焦点输出事件发生同样的事情，而不是模糊。

这是事件的预期结果吗，输入控件实际上正在丢失然后立即（重新）获得焦点？ event.target值是我附加事件的元素的id，表示这不是从其他元素冒出来的，但是当下拉列表出现时，Bootstrap仍然没有任何时髦和被盗的焦点没有以某种方式触发模糊事件呢？

无论发生了什么，我可以阻止它或解决它吗？

下拉列表的HTML如下所示：

<div class="dropdown">
  <div class="input-group" id="l_album_drop" data-toggle="dropdown">
    <input class="form-control" id="l_default_album"/>
    <span class="input-group-addon">
      <span class="caret dropdown-toggle" style="float:right;"></span>
    </span>
  </div>
  <ul class="dropdown-menu" style="height: auto; max-height: 256px; width: 100%; overflow-x: hidden; border: silver solid 1px; padding: 2px;">
    <li class="default-album-selector-item" data-albumName="Everypost Photos" data-albumID="10154456500750072" data-albumLink="https://www.facebook.com/album.php?fbid=10154456500750072&id=10154515744420072&aid=1073741841" data-albumCoverPhoto="https://scontent.xx.fbcdn.net/hphotos-xtf1/t31.0-8/11807144_10155908179995072_3021817604288183977_o.jpg">Everypost Photos</li>
    <li class="default-album-selector-item" data-albumName="Piquero Photos" data-albumID="10155857109655072" data-albumLink="https://www.facebook.com/album.php?fbid=10155857109655072&id=10154515744420072&aid=1073741850" data-albumCoverPhoto="https://scontent.xx.fbcdn.net/hphotos-xpa1/v/t1.0-9/11760176_10155857109690072_6083087322575761598_n.jpg?oh=c9861bd544f33bfd9b77fe9550943914&oe=5649D88D">Piquero Photos</li>
  </ul>
</div>

该活动的javascript如下所示：

$(document).ready(function(){
$("#l_default_album").on(
  "blur",
  function(e) {
    if (typingLinked.newAlbumName) {
      clearTimeout(typingLinked.newAlbumName);
    }
    $("#l_default_album").closest(".dropdown-menu").prev().dropdown("toggle");
    checkDefaultAlbumCharacters();
  });
});

修改我在Ubuntu 15.04（64位）上使用Google repo中的Chrome版本44.0.2403.130（64位）。

Answer 1

请参阅此JSFiddle：https://jsfiddle.net/ddan/DTcHh/10905/

这是您的HTML示例，其中您的JS仅替换为blur事件的警报。（该示例使用bootstrap v3）

$(document).ready(function(){
$("#l_default_album").on(
  "blur",
  function(e) {
    alert('BLUR INVOKED');
  });
});

仅在您离开输出字段（单击或按下按键...）时调用blur事件。

单击内部即输入的定位不会调用它。无法重现您在问题中描述的行为/错误。问题必须是别的。也许你的其他一些事件正在干扰。

带有附加模糊或聚焦事件的聚焦元素会在第二次单击时触发它

1 个答案: