Question

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

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

＆＃13;

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");});
});

＆＃13;

    
      <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>

＆＃13;

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>

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

1 个答案: