16

使用Angular和Angular UI-Bootstrap。

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

但是，在使用FireFox时，打开下拉菜单会使用户看起来好像离开了菜单（即使他们正在使用菜单中的下拉菜单）。如果有任何帮助，看起来下拉菜单会在文本框的后面和侧面打开。

在这种情况下，一张图片值一千字。左边是Chrome（期望的行为），右边是Firefox（不期望的行为）。如果嵌入的图像太小，请单击我。

在此处输入图像描述

这是代码。这是工具注册的显示部分。对于那些不熟悉 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>',

编辑：

  1. 复制问题的Plunker 已启动： plnkr 的 Clicky（问题的焦点是“项目字段”按钮 - 在 Chrome 中有效，在 firefox 中无效。
  2. 繁荣 - 赏金！

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

taRegisterTool('itemFields', {
            display:
4

4 回答 4

8

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

记录了一个非常老的FireFox 错误，状态为 UNCONFIRMED

标签中的下拉框不被视为标签父母的孩子

查看我的 Plunker 版本：这里

我已经扩展了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有一个补丁可以解决这样的问题，当下拉菜单获得焦点时将父元素设置为焦点。

于 2015-07-20T19:51:16.893 回答
5

简单的解决方案

您可以做的是从您尝试使用的按钮组中删除禁用的属性。这似乎导致了 Firefox 中的这种行为。

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

亲眼看看它的实际应用。更新 plnkr：http ://plnkr.co/edit/k7zI9G9078cAhShjz2l4?p=preview

于 2015-07-26T04:05:10.443 回答
4

工作解决方案

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

添加样式：

<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

于 2015-07-28T03:49:29.873 回答
1

这可能是一个很长的镜头，但是您是否重置了 CSS 默认值？在我的项目中，特定于浏览器的 CSS 默认值会导致浏览器之间的边距、填充等发生变化，并以不可预知的方式移动元素。

于 2015-07-22T16:38:16.220 回答