我在页面上有一系列div,您可以向左滑动,这将显示下面的div。当只有一个元素时,这样可以正常工作,但是当有多个元素时,它们会同时滑动,而不是单独滑动。
为了解决这个问题,我在这里尝试了这些想法:Find element finger is on during a touchend event
问题是,现在只有第一个元素被刷,而其余元素保持静止。关于如何解决这个问题的任何想法?我以为我可以使用this
,但它总会返回window
个对象。
代码:
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);
演示(仅适用于iOS):http://www.codekraken.com/testing/snowday/swipe.html
答案 0 :(得分:4)
您可以使用event.target
来获取事件来源的元素。
function touchStart(event){
var currentElement = event.target;
}
答案 1 :(得分:0)
$('#id').on('touchstart',function(e,data) {
var obj = e.target;
obj = $(this);
var id = obj.find....
});
使用obj = $(this)
,您可以使用jquery函数将event.target
转换为jquery-object ...
最好的
中号