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

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-10-26 17:27:53  来源:igfitidea点击:

Get element on touchstart?

javascriptjqueryiostouch-event

提问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 windowobject.

问题是,现在只有第一个元素被滑动,而其余元素保持静止。关于如何解决这个问题的任何想法?我以为我可以使用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.targetinto a jquery-object using jquery functions...

obj = $(this)您可以将event.target到使用jQuery功能的jQuery的对象...

best

最好的

M