角度材质菜单触发移动设备中的点击事件2次

Question

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

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

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

 
app.controller('MyController', function($scope, $mdSidenav) { 
 
    $scope.isSidenavOpen = false; 
 
    
 
    $scope.openLeftMenu = function() { 
 
    $mdSidenav('left').toggle(); 
 
    }; 
 
    
 
}); 
 
$(document).ready(function() { 
 
\t $("#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事件是由两个事件touchstart和mousedown这两者都是通过移动设备支持取代了事件mousedown替换您click事件（参见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>