javascript 在 touchstart 上获取元素?
声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow
原文地址: http://stackoverflow.com/questions/12925585/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Get element on touchstart?
提问by Charlie
I have a series of divs on a page which you can swipe left on, which will reveal a div underneath. This works fine when there is only one element, but when there are multiple, they all swipe in unison, instead of the one getting swiped alone.
我在页面上有一系列 div,您可以向左滑动,这将显示下面的 div。当只有一个元素时,这很好用,但是当有多个元素时,它们会一起滑动,而不是单独滑动一个。
To remedy this, I tried the ideas here: Find element finger is on during a touchend event
为了解决这个问题,我尝试了这里的想法:在 touchend 事件期间查找元素手指
Problem is, now only the first element gets swiped, while the rest of them stay stationary. Any ideas on how I could fix this? I thought I could use this
, but it would always return the window
object.
问题是,现在只有第一个元素被滑动,而其余元素保持静止。关于如何解决这个问题的任何想法?我以为我可以使用this
,但它总是会返回window
对象。
Code:
代码:
var originalCoord = {
x: 100,
y: 100
}
var finalCoord = {
x: 100,
y: 100
}
function touchMove(event) {
event.preventDefault();
finalCoord.x = event.targetTouches[0].pageX
finalCoord.y = event.targetTouches[0].pageY
}
function touchEnd(event) {
var changeY = originalCoord.y - finalCoord.y
if (changeY < 30 && changeY > (30 * -1)) {
changeX = originalCoord.x - finalCoord.x
if (changeX > 10) {
var elem = document.elementFromPoint(event.pageX, event.pageY);
console.log(elem);
$(elem).css("margin-left", "-54px");
setTimeout(function () {
$(elem).css("margin-left", "0px");}
, 500);
}
}
}
function touchStart(event) {
originalCoord.x = event.targetTouches[0].pageX
originalCoord.y = event.targetTouches[0].pageY
finalCoord.x = originalCoord.x
finalCoord.y = originalCoord.y
}
this.addEventListener("touchstart", touchStart, false);
this.addEventListener("touchmove", touchMove, false);
this.addEventListener("touchend", touchEnd, false);
Demo (only works on iOS): http://www.codekraken.com/testing/snowday/swipe.html
演示(仅适用于 iOS):http: //www.codekraken.com/testing/snowday/swipe.html
回答by ahren
You can get the element which the event originated in by using event.target
.
您可以使用 获取事件起源的元素event.target
。
function touchStart(event){
var currentElement = event.target;
}
回答by mboeckle
$('#id').on('touchstart',function(e,data) {
var obj = e.target;
obj = $(this);
var id = obj.find....
});
with obj = $(this)
you can transform event.target
into a jquery-object using jquery functions...
与obj = $(this)
您可以将event.target
到使用jQuery功能的jQuery的对象...
best
最好的
M
米