js 实现上下滑动面板 touchstart touchstart touchend

雨点打透心脏的1/2处 2022-12-01 14:11 255阅读 0赞

另一篇 ：[https://www.cnblogs.com/bndy/articles/1692164.html][https_www.cnblogs.com_bndy_articles_1692164.html]

index.html 中：

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Document</title>

<style>

\#inp \{

width: 100%;

height: 30%;

position: absolute;

left: 0;

bottom: 0;

background-color: antiquewhite;

\}

</style>

</head>

<body>

<div id="inp"></div>

<script src="./index.js"></script>

</body>

</html>

index.js 中：

function load ()\{

document.addEventListener('touchstart',touch, false);

document.addEventListener('touchstart',touch, false);

document.addEventListener('touchend',touch, false);

function touch (event)\{

var event = event || window.event;

var oInp = document.getElementById("inp");

switch(event.type)\{

case "touchstart":

oInp.innerHTML = "Touch started (" + event.touches\[0\].clientX + "," + event.touches\[0\].clientY + ")";

// oInp.style.cssText="height: event.touches\[0\].clientY;"

break;

case "touchend":

oInp.innerHTML = "<br>Touch end (" + event.changedTouches\[0\].clientX + "," + event.changedTouches\[0\].clientY + ")";

console.log(event.changedTouches\[0\].clientY,1111);

// if(event.changedTouches\[0\].clientY > 440) \{

//     oInp.style.cssText="height: 30%;"

// \} else if(event.changedTouches\[0\].clientY > 220)\{

//     oInp.style.cssText="height: 60%;"

// \} else if(event.changedTouches\[0\].clientY < 220)\{

//     oInp.style.cssText="height: 90%;"

// \}

console.log(window.screen.availHeight\*0.33,3333333333);

if(event.changedTouches\[0\].clientY > (window.screen.availHeight\*0.66)) \{

oInp.style.cssText="height: 30%;"

\} else if(event.changedTouches\[0\].clientY > (window.screen.availHeight\*0.33))\{

oInp.style.cssText="height: 60%;"

\} else if(event.changedTouches\[0\].clientY < (window.screen.availHeight\*0.33))\{

oInp.style.cssText="height: 90%;"

\}

break;

case "touchmove":

event.preventDefault();

oInp.innerHTML = "<br>Touch moved (" + event.touches\[0\].clientX + "," + event.touches\[0\].clientY + ")";

break;

\}

\}

\}

window.addEventListener('load',load, false);

console.log('屏幕高度：',window.screen.availHeight);

[https_www.cnblogs.com_bndy_articles_1692164.html]: https://www.cnblogs.com/bndy/articles/1692164.html

发表评论取消回复

表情：

评论列表（有 0 条评论，255人围观）

还没有评论，来说两句吧...

相关阅读

相关解决touchStart滑动时触发点击事件

> 由于我们在将点击事件委托到div,span,font,p等元素标签上时会导致移动端的ios设备无法识别这个点击事件（一般指click事件）， > 此时我们一般会使用to

水深无声/ 2023年10月18日 14:27/ 0 赞/ 160 阅读

相关 js 实现上下滑动面板 touchstart touchstart touchend

另一篇：[https://www.cnblogs.com/bndy/articles/1692164.html][https_www.cnblogs.com_bndy_art

雨点打透心脏的1/2处/ 2022年12月01日 14:11/ 0 赞/ 256 阅读

相关 javaScript-touch事件详解(touchstart、touchmove和touchend)-滑动事件案例

> HTML5中新添加了很多事件，但是由于他们的兼容问题不是很理想，应用实战性不是太强，所以在这里基本省略，咱们只分享应用广泛兼容不错的事件，日后随着兼容情况提升以后再陆

淡淡的烟草味﹌/ 2022年10月16日 07:50/ 0 赞/ 459 阅读

相关 HTML5实战与剖析之触摸事件(touchstart、touchmove和touchend)

　　HTML5中新添加了很多事件，但是由于他们的兼容问题不是很理想，应用实战性不是太强，所以在这里基本省略，咱们只分享应用广泛兼容不错的事件，日后随着兼容情况提升以后再陆续添加

àì夳堔傛蜴生んèń/ 2022年09月19日 15:28/ 0 赞/ 376 阅读

相关 JS实例-图片上下滑动

JS练习实例-自动上下滑动图片效果图： ![图片上下滑动][20161007100502577] <!DOCTYPE html> <html>

水深无声/ 2022年07月16日 05:12/ 0 赞/ 169 阅读

相关移动端使用touchstart，touchmove，touchend实现图片轮播

移动端基础事件介绍 touchstart //手指触碰屏幕 touchmove //手指在屏幕上滑动 touchend //手指离开屏幕移动端页面滑动

左手的ㄟ右手/ 2022年06月09日 10:51/ 0 赞/ 209 阅读

相关 angularJS 实现移动端触摸事件Touchstart Touchmove

angular 移动端开发，启用ngTouchstart,ngTouchmove,ngTouchend 1. app.js引用 .directive("ngTou

缺乏、安全感/ 2022年06月08日 14:39/ 0 赞/ 384 阅读

相关触摸事件 touchstart、touchmove、touchend

目录触摸事件概述触摸事件编码触摸手指个数分析触摸目标 DOM 元素分析触摸位置分析 -------------------- 触摸事件概述 1、H

╰半橙微兮°/ 2022年05月04日 00:30/ 0 赞/ 400 阅读

相关移动端事件touchstart touchmove touchend 动画事件过渡事件

在移动端新增了touch事件，因为手指的行为叫做“触摸”，鼠标的行为叫做“点击” 但是它仍然支持点击事件，有300ms的延迟，检测是否双击移动端的三个事件 tou

深碍√TFBOYSˉ_/ 2021年09月02日 07:17/ 0 赞/ 443 阅读

相关 HTML5触摸事件(touchstart、touchmove和touchend)

HTML5中新添加了很多事件，但是由于他们的兼容问题不是很理想，应用实战性不是太强，所以在这里基本省略，咱们只分享应用广泛兼容不错的事件，日后随着兼容情况提升以后再陆续添加分享

本是古典何须时尚/ 2021年06月26日 16:06/ 0 赞/ 741 阅读