如何跟踪离子应用程序中页面上的所有点击？答案

【问题标题】：How to Keep track of all clicks on page in ionic application?如何跟踪离子应用程序中页面上的所有点击？
【发布时间】：2015-06-26 20:42:56
【问题描述】：

我创建了包含复选框的简单页面。在此页面上，用户可以多次选中和取消选中复选框。我想跟踪所有这些事件？我该怎么做？

这是我的代码。

app.js

var pmApp = angular.module('pmApp', ['ionic']);

pmApp.controller('CheckboxController', function($scope) {
  $scope.devList = [
    { text: "Device & app history", details : "Allows the app to view one or more of: information about activity on the device, which apps are running, browsing history and bookmarks" ,checked: true },
    { text: "Identity", details: "Uses one or more of: accounts on the device, profile data", checked: false },
    { text: "Calendar", details: "Uses calendar information", checked: false },
    { text: "Contact", details: "Uses contact information", checked: false },
    { text: "Location", details: "Uses the device's location", checked: false },
    { text: "SMS", details: "Uses one or more of: SMS, MMS. Charges may apply.", checked: false }
  ];

  $scope.selection=[];
  // toggle selection for a given employee by name
  $scope.toggleSelection = function toggleSelection(item) {
     var idx = $scope.selection.indexOf(item);

     // is currently selected
     if (idx > -1) {
       $scope.selection.splice(idx, 1);
     }

     // is newly selected
     else {
       $scope.selection.push(item);
     }
   };

});

index.html

    <div class="list" ng-controller="CheckboxController">
        <ion-checkbox ng-repeat="item in devList"
                      ng-model="item.checked" 
                      ng-checked="selection.indexOf(item) > -1"
                      ng-click="toggleSelection(item)"
                      >
            {{ item.text }}
            <h3 class="item-text-wrap"> {{ item.details }}</h3>
        </ion-checkbox>
<div class="item">
          <pre ng-bind="selection | json"></pre> 
</div>
      </div>

在此先感谢，任何帮助将不胜感激。

问候

【问题讨论】：

您希望在哪里跟踪触发的事件以及您希望准确跟踪什么？
@mxa055 我想跟踪复选框勾选或取消勾选鼠标悬停事件和用户的按钮点击。我想用时间戳来跟踪所有触发事件。我想将这些跟踪数据保留在服务器端。如何将数据放在服务器端？ Mongo DB 还是简单的 SQL？

标签： angularjs cordova ionic-framework angularjs-directive

【解决方案1】：

您可以使用 https://docs.angularjs.org/api/ng/directive/ngMouseover 为所有元素上的鼠标悬停创建计数器：然后使用 https://docs.angularjs.org/api/ng/directive/ngClick 记录点击，https://docs.angularjs.org/api/ng/directive/ngMousemove 记录鼠标移动并获取位置：

使用的一切： ng-点击 ng-dblclick ng-mousedown ng-mouseup ng-mouseenter ng-mouseleave ng-鼠标移动 ng-鼠标悬停

下面是一些示例代码：

HTML:

<body ng-app="mainModule">
  <div ng-controller="mainController">
    <h3>1. Click</h3>
    <button id="firstBtn" ng-click="onFirstBtnClick()">Click me</button>
    <strong>RESULT:</strong> {{onFirstBtnClickResult}}<br />
    <br />
    <h3>2. Click with Dependency Injection</h3>
    <label>Type something: <input type="text" ng-model="secondBtnInput"></label>
    <button id="secondBtn" ng-click="onSecondBtnClick(secondBtnInput)">Click me</button><br />
    <strong>RESULT:</strong> {{onSecondBtnClickResult}}<br />
    <br />
    <h3>3. Double click</h3>
    Double-click the square<br />
    <img src="images/square.png" ng-dblclick="onDblClick()" /><br />
    <strong>RESULT:</strong> {{onDblClickResult}}<br />
    <h3>4. Mouse down, up, enter, leave, move, over</h3>
    Move the mouse on the square<br />
    <img src="images/square.png"
         ng-mousedown="onMouseDown($event)"
         ng-mouseup="onMouseUp($event)"
         ng-mouseenter="onMouseEnter($event)"
         ng-mouseleave="onMouseLeave($event)"
         ng-mousemove="onMouseMove($event)"
         ng-mouseover="onMouseOver($event)" /><br />
    <strong>MOUSE DOWN RESULT:</strong> {{onMouseDownResult}}<br />
    <strong>MOUSE UP RESULT:</strong> {{onMouseUpResult}}<br />
    <strong>MOUSE ENTER RESULT:</strong> {{onMouseEnterResult}}<br />
    <strong>MOUSE LEAVE RESULT:</strong> {{onMouseLeaveResult}}<br />
    <strong>MOUSE MOVE RESULT:</strong> {{onMouseMoveResult}}<br />
    <strong>MOUSE OVER RESULT:</strong> {{onMouseOverResult}}
  </div>
</body>
</html>

angular.module("mainModule", [])
  .controller("mainController", function ($scope)
  {
    // Initialization
    $scope.onFirstBtnClickResult = "";
    $scope.secondBtnInput = "";
    $scope.onDblClickResult = "";
    $scope.onMouseDownResult = "";
    $scope.onMouseUpResult = "";
    $scope.onMouseEnterResult = "";
    $scope.onMouseLeaveResult = "";
    $scope.onMouseMoveResult = "";
    $scope.onMouseOverResult = "";

    // Utility functions

    // Accepts a MouseEvent as input and returns the x and y
    // coordinates relative to the target element.
    var getCrossBrowserElementCoords = function (mouseEvent)
    {
      var result = {
        x: 0,
        y: 0
      };

      if (!mouseEvent)
      {
        mouseEvent = window.event;
      }

      if (mouseEvent.pageX || mouseEvent.pageY)
      {
        result.x = mouseEvent.pageX;
        result.y = mouseEvent.pageY;
      }
      else if (mouseEvent.clientX || mouseEvent.clientY)
      {
        result.x = mouseEvent.clientX + document.body.scrollLeft +
          document.documentElement.scrollLeft;
        result.y = mouseEvent.clientY + document.body.scrollTop +
          document.documentElement.scrollTop;
      }

      if (mouseEvent.target)
      {
        var offEl = mouseEvent.target;
        var offX = 0;
        var offY = 0;

        if (typeof(offEl.offsetParent) != "undefined")
        {
          while (offEl)
          {
            offX += offEl.offsetLeft;
            offY += offEl.offsetTop;

            offEl = offEl.offsetParent;
          }
        }
        else
        {
          offX = offEl.x;
          offY = offEl.y;
        }

        result.x -= offX;
        result.y -= offY;
      }

      return result;
    };

    var getMouseEventResult = function (mouseEvent, mouseEventDesc)
    {
      var coords = getCrossBrowserElementCoords(mouseEvent);
      return mouseEventDesc + " at (" + coords.x + ", " + coords.y + ")";
    };

    // Event handlers
    $scope.onFirstBtnClick = function () {
      $scope.onFirstBtnClickResult = "CLICKED";
    };

    $scope.onSecondBtnClick = function (value) {
      $scope.onSecondBtnClickResult = "you typed '" + value + "'";
    };

    $scope.onDblClick = function () {
      $scope.onDblClickResult = "DOUBLE-CLICKED";
    };

    $scope.onMouseDown = function ($event) {
      $scope.onMouseDownResult = getMouseEventResult($event, "Mouse down");
    };

    $scope.onMouseUp = function ($event) {
      $scope.onMouseUpResult = getMouseEventResult($event, "Mouse up");
    };

    $scope.onMouseEnter = function ($event) {
      $scope.onMouseEnterResult = getMouseEventResult($event, "Mouse enter");
    };

    $scope.onMouseLeave = function ($event) {
      $scope.onMouseLeaveResult = getMouseEventResult($event, "Mouse leave");
    };

    $scope.onMouseMove = function ($event) {
      $scope.onMouseMoveResult = getMouseEventResult($event, "Mouse move");
    };

    $scope.onMouseOver = function ($event) {
      $scope.onMouseOverResult = getMouseEventResult($event, "Mouse over");
    };
  });

【讨论】：

【解决方案2】：

如果适合您的需要，您可以尝试使用最新的 Ionic Analytics。更多信息见官方博客：http://docs.ionic.io/v1.0/docs/analytics-from-scratch。

用法非常简单（来自additional docs）：

.controller('MyCtrl', function($ionicAnalytics) {

  $ionicAnalytics.track('Purchase Item', {
     item_id: 'lpdsx,
     item_name: 'Leopard Socks'
   }); 
});

【讨论】：

感谢您的回答。我已经看过这些所有文档。如何跟踪鼠标悬停和复选框选中或取消选中事件？