javascript - 如何修复 Firefox c select 上的错误?

标签 javascript html css angularjs firefox

https://plnkr.co/edit/z2uW4O6D1uLFnsoLjWeb?p=preview

当鼠标悬停在 block 上时,选择必须显示。当您打开选择并指向其中一个选项时,选项应立即消失。

这在 chrome 中可以正常工作,但在 Firefox 中却不行。知道如何在 FF 中解决这个问题吗?

var app = angular.module('angularjs-starter', []);

app.controller('SpicyCtrl', function($scope) {
  $scope.spice = 'very';

});
.box {
    width: 250px;
    height: 250px;
    background: #ccc;
}
<!DOCTYPE html>
<html ng-app="angularjs-starter">
  
  <head lang="en">
    <meta charset="utf-8">
    <title>Controller example Plunker</title>
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.0.3/angular.min.js"></script>
    <link rel="stylesheet" href="style.css">
    <script>
      document.write('<base href="' + document.location + '" />');
    </script>
    <script src="app.js"></script>
  </head>
  
  <body>
    <h1>Welcome</h1>
    <div>Controller example</div>
    
    <div ng-controller="SpicyCtrl">
      <div class="box" ng-mouseover="active_dropdown = true"
								 ng-mouseleave="active_dropdown = false">
        
        
        <div ng-show="active_dropdown">
        <select name="" id="">
          <option>lorem test test</option>
          <option>lorem test test</option>
          <option>lorem test test</option>
          <option>lorem test test</option>
          <option>lorem test test</option>
          <option>lorem test test</option>
        </select>
        </div>

      </div>
    </div>
    
    
  </body>

</html>

最佳答案

问题出在 Firefox 中,当您选择下拉菜单时,它会考虑 mouseleave for class="box"并设置,

active_dropdown = false

你可以做的是代替 ng-mouseleave="active_dropdown = false"你可以给它一个函数 ng-mouseleave="test($event)".

现在在你的 app.js 中添加函数

$scope.test = function (event) {
    if (event.target.tagName !== 'SELECT') { // Update the code accordingly
      $scope.active_dropdown = false;
    }
}

关于javascript - 如何修复 Firefox c select 上的错误?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/48527299/

相关文章:

javascript - 灯箱可以离线工作,但不能在线工作

考虑到链接的 CSS 颜色网站?

javascript - 更改全页 slider 库中的导航颜色

javascript - 如何使用 Bootstrap 创建响应式轮播嵌入式卡片?

javascript - PreventDefault 在 Firefox 中不生效

javascript - jQuery Bounce Effect on click 没有 jQuery UI

javascript - 动态 Angular.js 菜单

css - 我需要内联样式代码来消除 wordpress 模板样式 css

javascript - jQuery 单击事件仅在移动鼠标后起作用

javascript - 从 AJAX 提交中拆分数组 $_FILES