iframe标签内元素添加手势滑动事件

比眉伴天荒 2022-05-14 10:54 417阅读 0赞

需求：通过手势滑动控制<div class="fullPage"></div>的显示和隐藏

因为在body内添加监听事件无法捕捉到iframe内页面的手势动作，所有需要在iframe里添加监听事件。

代码如下：

html

$(function () {
            $("#iframe").on("load", function(event) {
                //判断 iframe是否加载完成
                document.getElementById("iframe").contentWindow.document.getElementsByTagName("body")[0].addEventListener("touchstart", touchStart, false);
                document.getElementById("iframe").contentWindow.document.getElementsByTagName("body")[0].addEventListener("touchmove", touchMove, false);
                document.getElementById("iframe").contentWindow.document.getElementsByTagName("body")[0].addEventListener("touchend", touchEnd, false);
            });
    
        });
    
        function touchStart(e) {
            startX = e.touches[0].pageX;
            startY = e.touches[0].pageY;
        };
    
        function touchMove(e) {
            moveEndX = e.touches[0].pageX;
            moveEndY = e.touches[0].pageY;
            X = moveEndX - startX;
            Y = moveEndY - startY;
    
            if (Math.abs(X) > Math.abs(Y) && X > 0) {
                console.log("left 2 right", Math.abs(X) - Math.abs(Y));
            }else if (Math.abs(X) > Math.abs(Y) && X < 0) {
                console.log("right 2 left", Math.abs(X) - Math.abs(Y));
            }else if (Math.abs(Y) > Math.abs(X) && Y > 0) {
                if (Math.abs(Y) - Math.abs(X) > 1) {
                    console.log("top 2 bottom", Math.abs(Y) - Math.abs(X));
                    hiddenMinAudio = false;
                    $("#miniPlayer").fadeIn("slow");
                }
            }else if (Math.abs(Y) > Math.abs(X) && Y < 0) {
                if (Math.abs(Y) - Math.abs(X) > 1) {
                    console.log("bottom 2 top", Math.abs(Y) - Math.abs(X));
                    hiddenMinAudio = true;
                    $("#miniPlayer").fadeOut("slow");
                }
            }else {
                // console.log("just touch");
            }
        }
        function touchEnd(event) {
    
        };