Angular 材质菜单在移动设备中触发 2 次点击事件

Question

我已经从演示中实现了一个简单的角材质侧菜单。但这会在移动浏览器的整个页面中触发所有点击事件 2 次。 您甚至可以在 chrome 模拟器中看到这一点。 （单击 chrome 开发工具中的切换设备工具栏后运行此 sn-p）。

我搜索了很多。但没有运气。你们能找出问题所在吗。至少给我一个解决方法来一次性触发所有点击事件。

var app = angular.module('myapp', ['ngMaterial']);

app.controller('MyController', function($scope, $mdSidenav) {
  $scope.isSidenavOpen = false;
    
  $scope.openLeftMenu = function() {
    $mdSidenav('left').toggle();
  };
    
});
$(document).ready(function () {
	$("#tst2").click(function () {console.log("hai");});
});

    
      <link rel="stylesheet" type="text/css" href="https://ajax.googleapis.com/ajax/libs/angular_material/0.8.3/angular-material.min.css">
    
  
    
      <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
    
  
    
      <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular-animate.min.js"></script>
    
  
    
      <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular-aria.min.js"></script>
    
  
    
      <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angular_material/0.8.3/angular-material.min.js"></script>
    
  
    
      <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    
  
  <div ng-app="myapp">
    <div layout="row" ng-controller="MyController">
        <md-sidenav md-component-id="left" md-is-open="isSidenavOpen" class="md-sidenav-left">
            Left Nav!
        </md-sidenav>
         <md-content>
            <md-button ng-click="openLeftMenu()">
              Open Side Nav
            </md-button>
          </md-content>
    </div>
</div>
<div id="tst2">
       text demo content sidebar left open and close text text
</div>

Answer 1

将click 事件替换为mousedown 事件，因为显然click 事件被两个事件touchstart 和mousedown 替换，这两个事件都受移动设备支持（有关更多信息，请参阅this issue )

var app = angular.module('myapp', ['ngMaterial']);

app.controller('MyController', function($scope, $mdSidenav) {
  $scope.isSidenavOpen = false;

  $scope.openLeftMenu = function() {
    $mdSidenav('left').toggle();
  };

});
$(document).ready(function() {
  $("#tst2").mousedown(function() {
    console.log("hai");
  });
});

<link rel="stylesheet" type="text/css" href="https://ajax.googleapis.com/ajax/libs/angular_material/0.8.3/angular-material.min.css">
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular-animate.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular-aria.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angular_material/0.8.3/angular-material.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div ng-app="myapp">
  <div layout="row" ng-controller="MyController">
    <md-sidenav md-component-id="left" md-is-open="isSidenavOpen" class="md-sidenav-left">
      Left Nav!
    </md-sidenav>
    <md-content>
      <md-button ng-click="openLeftMenu()">
        Open Side Nav
      </md-button>
    </md-content>
  </div>
</div>
<div id="tst2">
  text demo content sidebar left open and close text text
</div>