Question

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

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

在Chrome中运行良好但在Firefox中运行不正常。任何想法如何解决这个问题？

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>

Answer 1

问题出在Firefox中，当你选择下拉列表时，它认为mouseleave为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;
    }
}

如何修复Firefox c选择的错误？

1 个答案: