角度材質菜單觸發移動設備中的點擊事件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>