处理长按和 ng-click

Posted 2023-02-27

技术标签:

【中文标题】处理长按和 ng-click【英文标题】：Handling on-long-press and ng-click 【发布时间】：2016-07-21 08:34:58 【问题描述】：

您好，我有以下代码（请使用平板电脑）：

body 
  font-family: Roboto;
  box-sizing: border-box

.cContent 
  display: flex;
  flex-direction: column;

.cHeaders 
  display: flex;
  flex-direction: row;

.cHeader 
  background-color: rgb(141, 141, 142);
  color: white;
  padding: 10px;
  margin-left: 10px;
  margin-bottom: 5px;

.cThemeHeader 
  width: 300px;

.cItemHeader 
  width: 300px;

.cCountHeader 
  width: 80px;
  text-align: center

.cData 
  display: flex;

.cRow 
  display: flex;
  flex-direction: column;

.cItemRow 
  display: flex;
  width: 300px;

.cBox 
  background-color: rgb(208, 229, 199);
  color: #4a7f35;
  padding: 10px;
  margin-left: 10px;
  margin-bottom: 5px;

.cTheme 
  width: 300px;

.cItem 
  background-color: white;
  color: #4a7f35;
  border: 1px solid #4a7f35;
  padding-left: 5px;
  padding-right: 5px;
  margin-right: 10px;
  cursor: pointer;
  font-size: 12px;
  height: 18px;

.cCount 
  width: 80px;
  background-color: #4a7f35;
  color: white;
  text-align: center

.cWindow 
  width: 100px;
  height: 100px;
  background-color: blue;
  color: white;

@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (-webkit-min-device-pixel-ratio: 1) 
  body 
    font-family: Arial;
  
  .cBox 
    height: 30px;
    font-size: 20px;
    line-height: 30px;
  
  .cItem 
    height: 30px;
    font-size: 20px;
    line-height: 30px;

<!doctype html>
<html ng-app="myApp" ng-controller="myController">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
  <meta name="apple-mobile-web-app-capable" content="yes">
  <title>Langer Klick</title>
  <link rel="stylesheet" href="./styles.css">
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.min.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-touch.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
  <script>
    angular.module("myApp", ['ngTouch']).controller("myController", function($scope) 
      $scope.dataList = [
        id: 1,
        count: 0,
        text: 'Leistung nach Bedarf',
        items: [
          id: 1,
          text: 'bei Bedarf'
        ]
      , 
        id: 2,
        count: 0,
        text: 'Leistung je 2 stündlich',
        items: [
          id: 1,
          text: '11:00'
        , 
          id: 2,
          text: '15:00'
        ]
      , 
        id: 3,
        count: 0,
        text: 'Leistung auf einen fixen Zeitpunkt',
        items: [
          id: 1,
          text: '15:00'
        , 
          id: 2,
          text: '16:00'
        ]
      ];
      $scope.isTablet = false;
      $scope.hideBox = function(event) 
        $(event.target).hide();
      

      $scope.closeWindow = function() 
        $scope.isTablet = false;
      

      $scope.helloWorld = function() 
        $scope.isTablet = true;
      
    ).directive('onLongPress', function($timeout) 
      return 
        restrict: 'A',
        link: function($scope, $elm, $attrs) 
          $elm.bind('touchstart', function(evt) 
            // Locally scoped variable that will keep track of the long press
            $scope.longPress = true;

            // We'll set a timeout for 600 ms for a long press
            $timeout(function() 
              if ($scope.longPress) 
                // If the touchend event hasn't fired,
                // apply the function given in on the element's on-long-press attribute
                $scope.$apply(function() 
                  $scope.$eval($attrs.onLongPress)
                );
              
            , 600);
          );

          $elm.bind('touchend', function(evt) 
            // Prevent the onLongPress event from firing
            $scope.longPress = false;
            // If there is an on-touch-end function attached to this element, apply it
            if ($attrs.onTouchEnd) 
              $scope.$apply(function() 
                $scope.$eval($attrs.onTouchEnd)
              );
            
          );
        
      ;
    );
  </script>
  <script src="./removeItem.js"></script>
</head>

<body>
  <div class="cContent">
    <div class="cHeaders">
      <div class="cHeader cThemeHeader">Katalog</div>
      <div class="cHeader cItemHeader">Plan</div>
      <div class="cHeader cCountHeader">Ist</div>
    </div>

    <div class="cData" ng-repeat="data in dataList">
      <div class="cThemeRow">
        <div class="cBox cTheme">data.text</div>
      </div>

      <div class="cBox cItemRow">
        <div ng-repeat="item in data.items" class="cItem" ng-click="data.count = data.count + 1; hideBox($event);" on-long-press="helloWorld();">item.text</div>
      </div>

      <div class="cCountRow">
        <div class="cBox cCount">data.count</div>
      </div>
    </div>
  </div>

  <div class="cWindow" ng-if="isTablet" ng-click="closeWindow();">HI, I'M A TEST WINDOW!</div>
</body>

</html>

当我单击它时，我想删除白框.cItem（用鼠标正常单击或正常触摸单击）。这工作得很好。我还想在平板电脑上长按触摸打开一个窗口，但不移除盒子。长按触摸有效，它会打开窗口，但也会删除框（用平板电脑检查）。我怎样才能打开窗口而不删除它（只是on-long-press 的功能而不是ng-click）？我还想删除平板电脑上长按的默认设置（标记文本等），然后打开窗口。有任何想法吗？谢谢。

【问题讨论】：

【参考方案1】：

试试这个，它的工作我给3 seconds 值用于长按使用，Mousedown 和 mouseup。

    angular.module("myApp", ['ngTouch']).controller("myController", function($scope,$timeout) 
      $scope.dataList = [
        id: 1,
        count: 0,
        text: 'Leistung nach Bedarf',
        items: [
          id: 1,
          text: 'bei Bedarf'
        ]
      , 
        id: 2,
        count: 0,
        text: 'Leistung je 2 stündlich',
        items: [
          id: 1,
          text: '11:00'
        , 
          id: 2,
          text: '15:00'
        ]
      , 
        id: 3,
        count: 0,
        text: 'Leistung auf einen fixen Zeitpunkt',
        items: [
          id: 1,
          text: '15:00'
        , 
          id: 2,
          text: '16:00'
        ]
      ];
      $scope.isTablet = false;
      $scope.hideBox = function(event) 
        //$scope.longPress = false;
        //$(event.target).hide();
      
      $scope.onMouseDown = function(event)
      $timeout($scope.callAtTimeout, 3000);
      
      
      $scope.longPress = false;
      $scope.callAtTimeout = function()
        $scope.longPress = true;
      
      
      $scope.onMouseUp = function(event)
      console.log($scope.longPress);
      console.log("on mouse up");
        if($scope.longPress)
        $scope.longPress = false;
        $(event.target).hide();
        
      

      $scope.closeWindow = function() 
        $scope.isTablet = false;
      

      $scope.helloWorld = function() 
        $scope.isTablet = true;
      
    ).directive('onLongPress', function($timeout) 
      return 
        restrict: 'A',
        link: function($scope, $elm, $attrs) 
          $elm.bind('touchstart', function(evt) 
            // Locally scoped variable that will keep track of the long press
            $scope.longPress = true;

            // We'll set a timeout for 600 ms for a long press
            $timeout(function() 
              if ($scope.longPress) 
                // If the touchend event hasn't fired,
                // apply the function given in on the element's on-long-press attribute
                $scope.$apply(function() 
                  $scope.$eval($attrs.onLongPress)
                );
              
            , 600);
          );

          $elm.bind('touchend', function(evt) 
            // Prevent the onLongPress event from firing
            $scope.longPress = false;
            // If there is an on-touch-end function attached to this element, apply it
            if ($attrs.onTouchEnd) 
              $scope.$apply(function() 
                $scope.$eval($attrs.onTouchEnd)
              );
            
          );
        
      ;
    );

body 
  font-family: Roboto;
  box-sizing: border-box

.cContent 
  display: flex;
  flex-direction: column;

.cHeaders 
  display: flex;
  flex-direction: row;

.cHeader 
  background-color: rgb(141, 141, 142);
  color: white;
  padding: 10px;
  margin-left: 10px;
  margin-bottom: 5px;

.cThemeHeader 
  width: 300px;

.cItemHeader 
  width: 300px;

.cCountHeader 
  width: 80px;
  text-align: center

.cData 
  display: flex;

.cRow 
  display: flex;
  flex-direction: column;

.cItemRow 
  display: flex;
  width: 300px;

.cBox 
  background-color: rgb(208, 229, 199);
  color: #4a7f35;
  padding: 10px;
  margin-left: 10px;
  margin-bottom: 5px;

.cTheme 
  width: 300px;

.cItem 
  background-color: white;
  color: #4a7f35;
  border: 1px solid #4a7f35;
  padding-left: 5px;
  padding-right: 5px;
  margin-right: 10px;
  cursor: pointer;
  font-size: 12px;
  height: 18px;

.cCount 
  width: 80px;
  background-color: #4a7f35;
  color: white;
  text-align: center

.cWindow 
  width: 100px;
  height: 100px;
  background-color: blue;
  color: white;

@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (-webkit-min-device-pixel-ratio: 1) 
  body 
    font-family: Arial;
  
  .cBox 
    height: 30px;
    font-size: 20px;
    line-height: 30px;
  
  .cItem 
    height: 30px;
    font-size: 20px;
    line-height: 30px;

<!doctype html>
<html ng-app="myApp" ng-controller="myController">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
  <meta name="apple-mobile-web-app-capable" content="yes">
  <title>Langer Klick</title>
  <link rel="stylesheet" href="./styles.css">
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.min.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-touch.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
  <script>

  </script>
  <script src="./removeItem.js"></script>
</head>

<body>
  <div class="cContent">
    <div class="cHeaders">
      <div class="cHeader cThemeHeader">Katalog</div>
      <div class="cHeader cItemHeader">Plan</div>
      <div class="cHeader cCountHeader">Ist</div>
    </div>

    <div class="cData" ng-repeat="data in dataList">
      <div class="cThemeRow">
        <div class="cBox cTheme">data.text</div>
      </div>

      <div class="cBox cItemRow">
        <div ng-repeat="item in data.items" class="cItem" ng-click="data.count = data.count + 1;" ng-mousedown="onMouseDown($event);" ng-mouseup="onMouseUp($event)">item.text</div>
      </div>

      <div class="cCountRow">
        <div class="cBox cCount">data.count</div>
      </div>
    </div>
  </div>

  <div class="cWindow" ng-if="isTablet" ng-click="closeWindow();">HI, I'M A TEST WINDOW!</div>
</body>

</html>

【讨论】：

以上是关于处理长按和 ng-click的主要内容，如果未能解决你的问题，请参考以下文章

如何让 onTouchEvent、长按和上下文菜单协同工作？

Android RecyclerView 监听Item短按和长按

在HAL for STM32中实现单按、长按和双按功能

长按和鲍勃菜单[关闭]

检测音量按钮的长按和短按 - iOS

长按和触摸开始