Javascript 触摸事件不返回触摸数据
编辑:“这不能在Angular UI Modals中完成”是一个有效的答案,如果事实确实如此的话 这是我从触摸事件中获得的返回数据。明显缺少任何有用的触摸X/Y坐标()。这是一个无可救药的泛泛问题,但无论如何,有什么想法吗?传递给触摸时执行的函数的“事件”对象:Javascript 触摸事件不返回触摸数据,javascript,angularjs,touch,jqlite,Javascript,Angularjs,Touch,Jqlite,编辑:“这不能在Angular UI Modals中完成”是一个有效的答案,如果事实确实如此的话 这是我从触摸事件中获得的返回数据。明显缺少任何有用的触摸X/Y坐标()。这是一个无可救药的泛泛问题,但无论如何,有什么想法吗?传递给触摸时执行的函数的“事件”对象: { "originalEvent": { "isTrusted": true }, "type": "touchstart", "timeStamp": 145038800
{
"originalEvent": {
"isTrusted": true
},
"type": "touchstart",
"timeStamp": 1450388006795,
"jQuery203026962137850932777": true,
"which": 0,
"view": "$WINDOW",
"target": {},
"shiftKey": false,
"metaKey": false,
"eventPhase": 3,
"currentTarget": {},
"ctrlKey": false,
"cancelable": true,
"bubbles": true,
"altKey": false,
"delegateTarget": {},
"handleObj": {
"type": "touchstart",
"origType": "touchstart",
"data": null,
"guid": 2026,
"namespace": ""
},
"data": null
}
现在,这是在画布中的角度UI模式中,但鼠标事件可以正常工作。这里是我的元素顺便说一句:
link: function(scope, element, attrs, model){
//scope.canvasElem = element[0].children[0].children[0];
scope.canvasElem = angular.element($('.touchScreen'))[0];
scope.ctx = scope.canvasElem.getContext('2d');
以下是我如何绑定的示例:
element.bind('touchstart', scope.touchStart);
编辑,下面是一个用于比较的mousedown事件对象:
{
"originalEvent": {
"isTrusted": true
},
"type": "mousedown",
"timeStamp": 1450389131400,
"jQuery20309114612976554781": true,
"toElement": {},
"screenY": 436,
"screenX": 726,
"pageY": 375,
"pageX": 726,
"offsetY": 81,
"offsetX": 41,
"clientY": 375,
"clientX": 726,
"buttons": 1,
"button": 0,
"which": 1,
"view": "$WINDOW",
"target": {},
"shiftKey": false,
"relatedTarget": null,
"metaKey": false,
"eventPhase": 3,
"currentTarget": {},
"ctrlKey": false,
"cancelable": true,
"bubbles": true,
"altKey": false,
"delegateTarget": {},
"handleObj": {
"type": "mousedown",
"origType": "mousedown",
"data": null,
"guid": 2025,
"namespace": ""
},
"data": null
}
要获得x和y坐标,请尝试使用以下代码
x1 = event.touches[0].pageX;
y1 = event.touches[0].pageY;
例如,您可以使用指令绑定触摸事件,指令内部可以有这样的代码
element.on('touchstart', function (event) {
event = event.originalEvent || event;
//actions
event.stopPropagation(); //if you need stop the propagation of the event
});
根据您的目标,还需要小心4种触摸事件(touchstart、touchend、touchmove、touchcancel)的行为。
要捕获光标的位置,请使用
element.on('touchmove', function (event) {
event.preventDefault();
if (event.targetTouches.length == 1) { //when only has one target in touch
var touch = event.targetTouches[0];
// Place element where the finger is
var x = touch.pageX + 'px';
var y = touch.pageY + 'px';
}
event.stopPropagation();
});
迟做总比不做好(注意,这是针对touchmove
):
在浏览AngularJs/jQuery时,我们需要查看
originalEvent
中的所有详细信息。请注意,[0]
部分可能指示多个同时触摸。我不知道它们是如何订购的,但是touch[0]
可能是第一个手指,touch[1]
可能是第二个手指。上面的解决方案对我有效,因为我只希望用户使用手写笔 事件已发布。他们没有触摸属性。这是正确的答案。这里有两个问题:1)在使用jQuery时,您必须使用OriginaleEvent(正如VSO在这里所指出的)2)在检查事件对象时,您不能轻易地将其转储到JSON以查看所有内容-事件对象包括循环的DOM对象引用。因此,尽管它没有显示在JSON转储中,但仍然有一个event.originalEvent.touchs[]数组。请参见此处进行讨论:
var touchRelativeToViewWindow = {
x: event.originalEvent.touches[0].pageX,
y: event.originalEvent.touches[0].pageY
};