“角度材料”菜单在移动设备中单击事件2次

Question

我已经实现了一个简单的角度材料从演示侧菜单。但是这是在移动浏览器中触发整个页面中的所有点击事件2次。，您甚至可以在铬仿真器中看到这一点。(单击铬开发工具中的“切换设备”工具栏后运行此代码段)。

我找了很多次了。但没有运气。你们能找到出什么问题了吗。至少给我一个解决办法来触发所有的点击事件一次。

​

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替换(更多信息请参见本期 )。

​

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>

​