版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/YISHENGYOUNI95/article/details/82467702
需求：通过手势滑动控制<div class="fullPage"></div>的显示和隐藏
因为在body内添加监听事件无法捕捉到iframe内页面的手势动作，所有需要在iframe里添加监听事件。
代码如下：
html
<body id="body">
<div>
<iframe id="iframe" style="width: 100vw;height: 100vh" src="/m/index" name="index">
</iframe>
<div class="fullPage" id="miniPlayer"></div>
</div>
</body>js
$(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) {
};