Angular材質菜單在移動設備中觸發點擊事件2次

Question

我已經從demo中實現了一個簡單的角度材料側面菜單。 但是這會在移動瀏覽器的整個頁面中觸發所有點擊事件2次。 你甚至可以在chrome模擬器中看到它 。 （單擊chrome dev工具中的切換設備工具欄后運行此代碼段）。

我搜索了很多。 但沒有運氣。 你們能找到問題嗎？ 至少給我一個解決方法來單次觸發所有點擊事件。

 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

通過事件mousedown替換您的click事件，因為顯然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>