H5touch事件监听

最新推荐文章于 2024-03-27 21:58:28 发布
最新推荐文章于 2024-03-27 21:58:28 发布
阅读量1k 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_35091566/article/details/53766815
版权
<html lang="en"> 
    <style>
        *{ margin:0px; padding:0px; }
        body,html{ width:100%; height:100%; }
        div#rect{ width:100%; height:100%; background:#f00;}
 
    </style>
</head>
<body>
     
    <div id="rect">
    </div>
     
    <script>
 
    (function(){
 
        var LSwiperMaker = function(o){ 
 
            var that = this;
            this.config = o;
            this.control = false;
            this.sPos = {};
            this.mPos = {};
            this.dire;
            this.config.bind.addEventListener('touchstart', function(e){ return that.start(e); } ,false);
            this.config.bind.addEventListener('touchmove', function(e){ return that.move(e); } ,false);
            this.config.bind.addEventListener('touchend', function(e){ return that.end(e); } ,false);
 
        }
 
        LSwiperMaker.prototype.start = function(e){
             
             var point = e.touches ? e.touches[0] : e;
             this.sPos.x = point.screenX;
             this.sPos.y = point.screenY;
        }
        LSwiperMaker.prototype.move = function(e){  
 
            var point = e.touches ? e.touches[0] : e;
            this.control = true;
            this.mPos.x = point.screenX;
            this.mPos.y = point.screenY;
        }
 
        LSwiperMaker.prototype.end = function(e){
            this.config.dire_h  || (!this.control ? this.dire = null : this.mPos.y > this.sPos.y ? this.dire = 'D' : this.dire = 'U')
            if (this.mPos.y - this.sPos.y <=-100) {
                alert("message");
            };
 
            this.control = false;
            this.config.backfn(this);
 
        }
 
        window.LSwiperMaker = LSwiperMaker;
        document.addEventListener('touchmove', function (e) { e.preventDefault(); }, false);// 禁止微信touchmove冲突
 
    }())
 
    var a = new LSwiperMaker({
            bind:document.getElementById("rect"),  // 绑定的DOM对象
            dire_h:false,     //true 判断左右， false 判断上下
    })
 
    </script>
</body>




</html>
春华秋实丶
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
手机端滑动事件监听
08-27
手机端滑动事件监听 简单的JS
移动端h5页面监听用户手势滑动
面对疾风吧
10-11 3574
直接整个代码复制丢进去运行; 需要加入自己的操作可以在最底下 alert(‘XX’)的地方加 var h = document.documentElement.clientHeight, mybody = document.getElementsByTagName('body')[0]; mybody.style.height = h + 'px'; //返回角度 function GetSlideAngle(d
html5 移动端的手指触屏事件
热门推荐
kk_yanwu的博客
06-14 1万+
用户在移动端浏览H5的时候，会使用手指进行一连串的操作，单击、双击、上拉、下拉等等一系列操作，这里主要针对touch事件进行一些简单的介绍； 用户从手指触碰到屏幕到手指离开屏幕这中间，会触发一系列的touch事件： ①touchstart：当手指触碰到屏幕的时候触发 ②touchmove：当手指在屏幕上滑动的时候触发 ③touchend：当手指离开屏幕的时候时候触发 ④touchcan
H5移动端常用事件，此中大有文章，5G音视频时代还不学NDK开发吗
最新发布
m0_61369360的博客
03-27 625
中年危机是真实存在的，即便有技术傍身，还是难免对自己的生存能力产生质疑和焦虑，这些年职业发展，一直在寻求消除焦虑的依靠。技术要深入到什么程度？做久了技术总要转型管理？我能做什么，我想做什么？一技之长，就是深耕你的专业技能，你的专业技术。（重点）独立做事，当你的一技之长达到一定深度的时候，需要开始思考如何独立做事。（创业）拥有事业，选择一份使命，带领团队实现它。（创业）一技之长分五个层次栈内技术 - 是指你的前端专业领域技术栈外技术 - 是指栈内技术的上下游，领域外的相关专业知识。
【h5长按事件】H5页面监听长按和点击事件
weixin_48596030的博客
08-15 5330
【h5长按事件】H5页面监听长按和点击事件
HTML5触摸事件touch监听
pais - 和尚吃肉
12-20 1473
--> --> * { margin: 0px; padding: 0px; } body, html { width: 100%; height: 100%; } div#rect {
微信小程序 监听手势滑动切换页面
UFO00001的博客
06-13 1万+
微信小程序 监听手势滑动切换页面 1.对应的xml里写上手势开始、滑动、结束的监听： 2.Js: var touchDot = 0;//触摸时的原点 var time = 0;// 时间记录，用于滑动时且时间小于1s则执行左右滑动 var interval = "";// 记录/清理时间记录 Page({ data: {...} }) Page({ data: { ... },
webview 监听页面显示事件
06-08
webview 监听页面显示事件，很好用
Html5 APP中监听返回事件处理的方法示例
09-27
主要介绍了Html5 APP中监听返回事件处理的方法示例的相关资料，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
html5手机触屏touch事件介绍
10-22
本文主要介绍html5手机触屏touch事件，简单举例，需要的朋友可以参考下。
APP中：vue-h5项目监听从别的项目页面返回进行刷新.pdf
12-16
APP中：vue-h5项目监听从别的项目页面返回进行刷新
HTML5触摸事件(touchstart、touchmove和touchend)的实现
11-20
HTML5中新添加了很多事件，但是由于他们的兼容问题不是很理想，应用实战性不是太强，所以在这里基本省略，咱们只分享应用广泛兼容不错的事件，日后随着兼容情况提升以后再陆续添加分享。今天为大家介绍的事件主要是触摸事件：touchstart、touchmove和touchend。 一开始触摸事件touchstart、touchmove和touchend是iOS版Safari浏览器为了向开发人员传达一些信息新添加的事件。因为iOs设备既没有鼠标也没有键盘，所以在为移动Safari浏览器开发交互性网页的时候，PC端的鼠标和键盘事件是不够用的。 在iPhone 3Gs发布的时候，其自带的移动Safari浏
vue H5中使用kim-vue-touch监听上滑，点击下滑事件
liuxi_happy的博客
06-08 1710
移动端监听上滑下滑
H5下拉搜索框-LAYUI
myydan的专栏
03-29 1270
可实现下拉选择及搜索提示效果！使用layui前端框架。
H5:移动端触屏事件 touch
海生的博客
08-03 1万+
touchstart事件：当手指触摸屏幕时候触发，即使已经有一个手指放在屏幕上也会触发。 touchmove事件：当手指在屏幕上滑动的时候连续地触发。调用preventDefault()事件可以阻止滚动。 touchend事件：当手指从屏幕上离开的时候触发。 touchcancel事件：触摸结束的时候触发 每个触摸事件都包括了三个触摸列表，每个列表里包含了对应的
移动Web开发入门(三) -- touch事件
Sun_blog
08-27 352
文章目录touch事件touch事件分类代码演示页面效果点击红色区域未移动点击红色区域，移动到红色区域抬起点击红色区域，移动到红色区域外抬起在红色区域外点击，移动到红色区域抬起在红色区域外点击，穿过红色区域移动到红色区域外抬起event对象控制台打印event对象控制台打印changedTouches对象扩展HAMMER.JS touch事件 touch事件是移动端特有的，由于移动端设备大都具备触摸功能，所以移动端浏览器都引入了触摸 touch事件。 touch相关的事件跟普通的其他dom事件一样使用，可以
HTML5触摸事件
Mxy18851251178的博客
12-02 224
HTML5中新添加了很多事件，但是由于他们的兼容问题不是很理想，应用实战性不是太强，所以在这里基本省略，咱们只分享应用广泛兼容不错的事件，日后随着兼容情况提升以后再陆续添加分享。今天为大家介绍的事件主要是触摸事件：touchstart、touchmove和touchend。touchstart事件：当手指触摸屏幕时候触发，即使已经有一个手指放在屏幕上也会触发。touchmove事件：当手指在屏幕上滑动的时候连续地触发。在这个事件发生期间，调用preventDefault()事件可以阻止滚动。
html5触屏滑动事件,HTML5的touch事件详解
weixin_42400970的博客
06-05 1005
原标题：HTML5的touch事件详解HTML5中新添加了很多事件，比较常看到的是touch事件，下面来详解下html5中的触摸touch事件。touchstart：触摸开始的时候触发touchmove：手指在屏幕上滑动的时候触发touchend：触摸结束的时候触发每个触摸事件都包括了三个触摸列表，每个列表里包含了对应的一系列触摸点(用来实现多点触控)touches：当前位于屏幕上的所有手指的列表...
h5 js怎么监听全局事件
07-15
要在 H5 中监听全局事件，可以使用以下方法： 1. 使用 `addEventListener` 方法： ```javascript window.addEventListener('事件类型', 事件处理函数); ``` 例如，要监听全局的点击事件： ```javascript window.addEventListener('click', function(event) { console.log('全局点击事件触发'); }); ``` 2. 使用 `on<事件类型>` 属性： ```javascript window.on<事件类型> = 事件处理函数; ``` 例如，要监听全局的键盘按下事件： ```javascript window.onkeydown = function(event) { console.log('全局键盘按下事件触发'); }; ``` 注意，这里的 `window` 对象表示全局对象，在浏览器环境中即代表当前窗口。 您可以根据需要选择适合的事件类型，并编写对应的事件处理函数。常见的全局事件类型包括点击事件（`click`）、键盘按下事件（`keydown`）、窗口加载事件（`load`）、窗口关闭事件（`beforeunload`）等。可以根据具体需求参考相关文档以及浏览器提供的支持来选择适合的事件类型。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值