Question

使用 Angular 和 Angular UI-Bootstrap 。

我在 textAngular 中创建了一个下拉菜单。当您单击文本框或其中一个菜单选项以外的其他内容时，它会禁用该菜单。这是期望的行为。

但是，当使用 FireFox 时，打开一个下拉列表会使用户离开菜单（即使他们使用菜单中的下拉菜单）。如果它有任何帮助，看起来下拉打开后面和文本框的侧面。

在这种情况下，一张图片值1000字。左边是 Chrome （所需行为），右边是 Firefox （不是所需行为）。 Click me in case embedded image is too small.

enter image description here

这是代码。这是工具注册的显示部分。对于那些不熟悉textangular的人来说 - 只是创建按钮的代码：

    display: '<span class="btn-group" dropdown dropdown-append-to-body style="padding: 0px 0px 0px 0px">' +
    '<button class="btn btn-default dropdown-toggle" dropdown-toggle type="button" ng-disabled="showHtml()">' +
    '   <span>Items Fields</span>' +
    '</button>' +
    '<ul class="dropdown-menu">' +
    '   <li ng-repeat="o in options">' +
    '       <a ng-click="action(o)">{{o.name}}</a>' +
    '   </li>' +
    '</ul>' +
    '</span>',

编辑：

复制问题的Plunker已启动：Clicky for plnkr（问题的焦点是“项目字段”按钮 - 在Chrome中有效，在Firefox中不起作用。
轰 - 赏金！

P.S。请不要被代码量吓倒。唯一相关的html位于app.js文件中，位于taRegisterTool'itemFields'下。

taRegisterTool('itemFields', {
            display:

Answer 1

在FireFox中，您的下拉列表成为焦点。它不是FF中父元素的一部分。 Chrome会将下拉列表视为元素的一部分。

有一个非常古老的FireFox bug已登录状态 UNCONFIRMED

标记中的下拉框不会被视为子文件标签的父母

查看我的Plunker版本：Here

我扩展了 textAngular.min.js 。在1481行有一个手表

    angular.extend(g, angular.copy(c)), i.taToolbar && (g.toolbar =
     g.$parent.$eval(i.taToolbar)), i.taToolbarClass && (g.classes.toolbar =
     i.taToolbarClass), i.taToolbarGroupClass && (g.classes.toolbarGroup = 
     i.taToolbarGroupClass), i.taToolbarButtonClass && 
     (g.classes.toolbarButton = i.taToolbarButtonClass), 
     i.taToolbarActiveButtonClass && (g.classes.toolbarButtonActive = 
     i.taToolbarActiveButtonClass), i.taFocussedClass && (g.classes.focussed =
      i.taFocussedClass), g.disabled = !0, g.focussed = !1, g._$element = h, h[0].innerHTML = "", h.addClass("ta-toolbar " + g.classes.toolbar), 
     g.$watch("focussed", function() {

我在函数中放置了一个日志以显示元素的焦点状态

console.log(g.focussed);

在 FireFox 中，点击下拉列表即可

false

在 Chrome 中，点击下拉列表时

false
true

似乎 Chrome 有一个补丁正在观察这样的问题，在下拉菜单获得焦点时将父元素设置为焦点。

Answer 2

简单解决方案

您可以执行的操作是从您尝试使用的按钮组中删除已禁用的属性。这似乎在Firefox中引起了这种行为。

$('body').on('click', '.ta-toolbar.btn-toolbar .btn-group', function(){
    $(this).removeAttr('disabled');
});

为自己看看它的实际效果。更新了plnkr：http://plnkr.co/edit/k7zI9G9078cAhShjz2l4?p=preview

Answer 3

工作解决方案

我现在完全了解它，想到了一个更简单的解决方案。查看使用绿色功能的下拉列表。我通过打开下拉列表来解决由点击引起的问题。为了更安全，您可以完全禁用单击功能。

添加样式：

<style>
    .dropdown-menu{
        margin-top: 0px;
    }
</style>

添加脚本：

<script>
    $('body').on('mouseenter', '.ta-toolbar.btn-toolbar .btn-group', function(){
        $(this).addClass('open');
        $(this).children('button').css('pointer-events', 'none');
    });

    $('body').on('mouseleave', '.ta-toolbar.btn-toolbar .btn-group', function(){
        $(this).removeClass('open');
    });
</script>

工作Plnkr：http://plnkr.co/edit/7itorLFtKaxEgekGZU1B?p=preview

Answer 4

这可能是一个很长的镜头，但你重置了你的CSS默认值？在我的项目中，浏览器特定的CSS默认值导致从浏览器到浏览器的边距，填充等变化，并以不可预测的方式移动元素。

下拉导致按钮失去焦点

4 个答案:

简单解决方案

工作解决方案