如何在离子应用程序中跟踪页面上的所有点击? [英] How to Keep track of all clicks on page in ionic application?
本文介绍了如何在离子应用程序中跟踪页面上的所有点击?的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我创建了包含复选框的简单页面.在此页面上，用户可以多次选中和取消选中复选框.我想跟踪所有这些事件?我该怎么做?
这是我的代码.
app.js
var pmApp = angular.module('pmApp', ['ionic']);pmApp.controller('CheckboxController', function($scope) {$scope.devList = [{ text: "Device & app history", details : "允许应用查看以下一项或多项:关于设备活动的信息、正在运行哪些应用、浏览历史记录和书签"，选中:true },{ 文本:身份"，详细信息:使用以下一项或多项:设备上的帐户，个人资料数据"，选中:false }，{ text: "日历", details: "使用日历信息", 勾选: false },{ text: "Contact", details: "Uses contact information", check: false },{ text: "Location", details: "使用设备的位置", 勾选: false },{ text: "SMS", details: "使用一种或多种:SMS、MMS.可能需要收费.", 勾选: false }];$scope.selection=[];//按姓名切换给定员工的选择$scope.toggleSelection = function toggleSelection(item) {var idx = $scope.selection.indexOf(item);//当前被选中如果 (idx > -1) {$scope.selection.splice(idx, 1);}//是新选择的别的 {$scope.selection.push(item);}};});index.html
<ion-checkbox ng-repeat="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>提前致谢，任何帮助将不胜感激.
问候
解决方案
您可以使用 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-clickng-dblclickng-mousedownng-mouseupng-鼠标输入ng-mouseleaveng-mousemoveng-鼠标悬停
这是一些示例代码:
HTML:
<div ng-controller="mainController"><h3>1.点击<button id="firstBtn" ng-click="onFirstBtnClick()">点击我</button><strong>结果:</strong>{{onFirstBtnClickResult}}
<br/><h3>2.单击依赖注入<label>输入一些东西:<input type="text" ng-model="secondBtnInput"></label><button id="secondBtn" ng-click="onSecondBtnClick(secondBtnInput)">点击我</button><br/><strong>结果:</strong>{{onSecondBtnClickResult}}<br/><br/><h3>3.双击双击方块<br/><img src="images/square.png" ng-dblclick="onDblClick()"/><br/><strong>结果:</strong>{{onDblClickResult}}<br/><h3>4.鼠标向下、向上、进入、离开、移动、越过在方块上移动鼠标<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>鼠标按下结果:</strong>{{onMouseDownResult}}<br/><strong>鼠标上移结果:</strong>{{onMouseUpResult}}<br/><strong>鼠标输入结果:</strong>{{onMouseEnterResult}}<br/><strong>鼠标离开结果:</strong>{{onMouseLeaveResult}}
<strong>鼠标移动结果:</strong>{{onMouseMoveResult}}
<strong>鼠标悬停结果:</strong>{{onMouseOverResult}}</html>
JS
angular.module("mainModule", []).controller("mainController", function ($scope){//初始化$scope.onFirstBtnClickResult = "";$scope.secondBtnInput = "";$scope.onDblClickResult = "";$scope.onMouseDownResult = "";$scope.onMouseUpResult = "";$scope.onMouseEnterResult = "";$scope.onMouseLeaveResult = "";$scope.onMouseMoveResult = "";$scope.onMouseOverResult = "";//实用函数//接受一个 MouseEvent 作为输入并返回 x 和 y//相对于目标元素的坐标.var getCrossBrowserElementCoords = 函数(鼠标事件){变量结果 = {x: 0,y:0};如果(！鼠标事件){mouseEvent = window.event;}if (mouseEvent.pageX || mouseEvent.pageY){result.x = mouseEvent.pageX;result.y = mouseEvent.pageY;}否则如果(mouseEvent.clientX || mouseEvent.clientY){result.x = mouseEvent.clientX + document.body.scrollLeft +document.documentElement.scrollLeft;result.y = mouseEvent.clientY + document.body.scrollTop +document.documentElement.scrollTop;}如果(鼠标事件.目标){var offEl = mouseEvent.target;var offX = 0;var offY = 0;如果(typeof(offEl.offsetParent)！=未定义"){而 (offEl){offX += offEl.offsetLeft;offY += offEl.offsetTop;offEl = offEl.offsetParent;}}别的{offX = offEl.x;offY = offEl.y;}结果.x -= offX;结果.y -= offY;}返回结果；};var getMouseEventResult = function (mouseEvent, mouseEventDesc){var coords = getCrossBrowserElementCoords(mouseEvent);return mouseEventDesc + " at (" + coords.x + ", " + coords.y + ")";};//事件处理程序$scope.onFirstBtnClick = 函数 () {$scope.onFirstBtnClickResult = "点击";};$scope.onSecondBtnClick = 函数(值){$scope.onSecondBtnClickResult = "你输入了 '" + value + "'";};$scope.onDblClick = 函数 () {$scope.onDblClickResult = "双击";};$scope.onMouseDown = 函数($event){$scope.onMouseDownResult = getMouseEventResult($event, "鼠标按下");};$scope.onMouseUp = 函数($event){$scope.onMouseUpResult = getMouseEventResult($event, "鼠标向上");};$scope.onMouseEnter = 函数($event){$scope.onMouseEnterResult = getMouseEventResult($event, "鼠标进入");};$scope.onMouseLeave = 函数($event){$scope.onMouseLeaveResult = getMouseEventResult($event, "鼠标离开");};$scope.onMouseMove = 函数($event){$scope.onMouseMoveResult = getMouseEventResult($event, "鼠标移动");};$scope.onMouseOver = 函数($event){$scope.onMouseOverResult = getMouseEventResult($event, "鼠标悬停");};});I have created simple page which contains check boxes. On this page user can check and uncheck boxes multiple times. I want to keep track of all these events? How Can I do that?
here is my code.
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>
Thanks in advance, any help would be appreciated.
Regards
解决方案
You can use https://docs.angularjs.org/api/ng/directive/ngMouseover to make a counter for mouse hovers on all your elements: and then use https://docs.angularjs.org/api/ng/directive/ngClick to record clicks and https://docs.angularjs.org/api/ng/directive/ngMousemove to record the mouse being moved and get the position:
Everything Used: ng-click ng-dblclick ng-mousedown ng-mouseup ng-mouseenter ng-mouseleave ng-mousemove ng-mouseover
Here is some example code:
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>
JS
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");
};
});
这篇关于如何在离子应用程序中跟踪页面上的所有点击?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
