-
本版专家分：0结帖率 0% -
写了一个滑动翻页的功能，电脑上面 滑动过程非常流畅，换手机上测试就很卡顿了，直接上代码了。
因为是touch事件，电脑上测试的话，你懂的···
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
<meta name="apple-mobile-web-app-capable" content="yes" />
<script src="jquery-1.8.3.min.js"></script>
<style>
html,
body {
height: 100%;
overflow: 0;
}
* {
margin: 0;
padding: 0;
}
#containner {
height: 100%;
width: 100%;
max-width: 400px;
background: #ccc;
margin: 0 auto;
position: relative;
}
.layer1 {
background: url(img/8.jpg);
z-index: 1;
}
.layer2 {
background: url(img/7.jpg);
z-index: 2;
}
.layer3 {
background: url(img/6.jpg);
z-index: 3;
}
.layer4 {
background: url(img/5.jpg);
z-index: 4;
}
.layer5 {
background: url(img/4.jpg);
z-index: 5;
}
.layer6 {
background: url(img/3.jpg);
z-index: 6;
}
.layer7 {
background: url(img/2.jpg);
z-index: 7;
}
.layer8 {
background: url(img/1.jpg);
z-index: 8;
}
.slow_action {
-webkit-transition: all .5s ease;
}
.layer1,
.layer2,
.layer3,
.layer4,
.layer5,
.layer6,
.layer7,
.layer8 {
width: 100%;
height: 100%;
position: absolute;
background-size: 100% 100%;
}
</style>
</head>
<body>
<div id="containner">
<div class="layer8 slow_action"></div>
<div class="layer7 slow_action"></div>
<div class="layer6 slow_action"></div>
<div class="layer5 slow_action"></div>
<div class="layer4 slow_action"></div>
<div class="layer3 slow_action"></div>
<div class="layer2 slow_action"></div>
<div class="layer1 slow_action"></div>
</div>
</body>
<script>
var start_x, start_y, end_x, end_y, move_num;
var client_height = $(window).height();
$("#containner div").on("touchstart", function(e) {
e.preventDefault();
start_x = e.originalEvent.targetTouches[0].clientX;
start_y = e.originalEvent.targetTouches[0].clientY;
console.log(start_x);
console.log(start_y);
});
$("#containner div").on("touchmove", function(e) {
e.preventDefault();
$(this).removeClass("slow_action");
end_x = e.originalEvent.targetTouches[0].clientX;
end_y = e.originalEvent.targetTouches[0].clientY;
move_num = (end_y - start_y).toFixed(2);
console.log(move_num);
var tf_num = "translateY(" + move_num + "px)";
$(this).css("-webkit-transform", tf_num);
});
$("#containner div").on("touchend", function() {
$(this).addClass("slow_action");
if (move_num < -(client_height / 2)) {
$(this).css({
"-webkit-transform": "translateY(-900px)",
});
} else if (move_num > 0) {
$(this).css({
"-webkit-transform": "translateY(0px)",
});
} else {
$(this).css({
"-webkit-transform": "translateY(0px)",
});
}
});
</script>
</html>
![]()
-
本版专家分：473 -
$("#containner div").on("touchstart", function(e) {
//e.preventDefault();
start_x = e.originalEvent.targetTouches[0].clientX;
start_y = e.originalEvent.targetTouches[0].clientY;
console.log(start_x);
console.log(start_y);
});
-
本版专家分：0
-
试了下 还是很卡顿
-
本版专家分：80
-
- GitHub 绑定GitHub第三方账户获取
-
-
需要明白以下原理：
dom渲染和js执行是在一个线程里面，dom重绘重排的时候，js是不能执行的，同样的，js执行的时候，dom是不能重绘重排的，js任何的dom操作都会生成dom渲染相关的任务。
所以，根据这个原理，你优化一下你的代码吧，特别是你的代码运行在手机这种平台上。
- 小程序touchmove事件中setData优化过程
- 出现场景： 在做一个小球跟随手指移动的效果时候，由于在<em>touchmove</em><em>事件</em>中频繁调用setData改变小球的位移实现，在开发工具和IOS平台还算流畅，但在安卓机下<em>手机</em>预览出现极其<em>卡顿</em>的交互，简直是不堪入目。 可微信web开发者工具打开 片段代码https://developers.weixin.qq.com/s/B9UHyvmo7t6t 问题根源： setData每秒调用高达50左右...
- js鼠标拖拽事件碰到iframe会卡顿
- js写的鼠标拖拽<em>事件</em>，当鼠标滑到iframe区域时，会卡住。我理解的应该是因为iframe框中为加载别的页面，鼠标在iframe框时，相当于处在别的页面中，所以拖拽失效。 1.<em>测试</em>代码： <div id="draggable"> <iframe src="http://www.baidu.com"></iframe> </div> 2...
- 移动端触摸事件touchmove的坑
- 转载地址：http://www.mizuiren.com/452.html 一说到移动端触摸<em>事件</em>，大家的反应不就是touchstart，<em>touchmove</em>，touchend吗，相当于pc段的mousedown，mousemove，mouseup，只要是写过pc端的js的话，若不慎，往往会坑在移动端。 比如说最近我就被<em>touchmove</em>坑了好久好久不能自拔。我的意图是在触摸的时候获取触控的位置坐...
- 用touchstart、touchmove、touchend简陋实现左右滑动【触摸事件】
- touchstart<em>事件</em>:当一开始触摸时所获取触发的【就算不滑动也会触发】 touchend<em>事件</em>：当离开触摸屏时所触发的<em>事件</em> <em>touchmove</em><em>事件</em>：当你触摸时滑动时连续发生的<em>事件</em> 刚开始触碰，目的要实现互动在一定的范围内滑动一个图标，超过一定的值时跳转到下一页。 要实现该效果的图标【这里我是在类里面用背景图放入我需要的图片】 &lt;a href="javascript:;" cla...
- JS得到浏览器每秒帧数fps 利用requestAnimationFrame
- 平日学习点滴 背景： 今天无意中发现一个方法 window.requestAnimationFrame Google之后，就完成了下面得到<em>浏览器</em>每秒帧数的方法。 使用： showFPS.go();// go! 代码： /****得到<em>浏览器</em>每秒帧数fps****@DateMar132013**/varshow...
- touchmove事件中禁止滚动
- 今天写一个简单的react轮播插件，发现<em>touchmove</em>的preventDefualt()无效，且chrome<em>浏览器</em>给出下面提示： react-dom.development.js:1458 [Intervention] Unable to preventDefault inside passive event listener due to target being treated as ...
- 安卓手机自带浏览器ontouchmove不触发
- 这个ontou
- HTML5触摸事件(touchstart、touchmove和touchend) （转）
- touchstart<em>事件</em>：当手指触摸屏幕时候触发，即使已经有一个手指放在屏幕上也会触发。 <em>touchmove</em><em>事件</em>：当手指在屏幕上滑动的时候连续地触发。在这个<em>事件</em>发生期间，调用preventDefault()<em>事件</em>可以阻止滚动。 touchend<em>事件</em>：当手指从屏幕上离开的时候触发。 touchcancel<em>事件</em>：当系统停止跟踪触摸的时候触发。关于这个<em>事件</em>的确切出发时间，文档中并没有...
- 求助！为什么touchmove不触发
- var startX=0; var endX=0; var moveX=0; imgBox.addEventListener("touchstart",function(e){ startX=e.to
- 微信浏览器touchmove事件卡顿问题
- 由于公众号功能需要自己开发界面，遇到<em>touchmove</em><em>事件</em><em>卡顿</em>，最后在网上查得出： 主要是由于200ms超时导致内核不一定会一直处理<em>touchmove</em><em>事件</em>，一旦超时会将后续所有的<em>事件</em>转交给UI处理，导致<em>touchmove</em>不会一直触发。系统<em>浏览器</em>也存在同样的问题，为了解决开发者需要，建议开发者在touchstart时调用event.preventDefault，这样就可以保证内核会一起触发touch
- 解决手机上层滑动，导致底层body滑动（touchmove的阻止）
- 原文链接：https://www.haorooms.com/post/webapp_bodyslidebcdiv 下图是截取了项目部分图片~左边白色区域是从左侧滑出的菜单栏，右边灰色区域是遮罩层； 当左边用户中心白色区域菜单过多，或者是<em>手机</em>屏幕过小出现滚动条的时候，在其表层滑动时，底层部分body也会跟着滑动~ 解决方法： 1、该区域没有滚动条： 最直接的办法，禁止表层滑动，如...
- 触摸事件 touchstart、touchmove、touchend
- 目录 触摸<em>事件</em> 触摸<em>事件</em>编码 触摸手指个数分析 触摸目标 DOM 元素分析 触摸位置分析 触摸<em>事件</em> HTML5 中， PC 端基于鼠标的界面互动主要是单击， 移动端界面交互方式主要是触摸。 移动端<em>浏览器</em>触摸<em>事件</em> <em>事件</em>名称 描述 是否包含 touches 数组 touchstart 触摸开始，多点触控，后面的手指同样会触发 是 <em>touchmove</em> ...
- 关于移动端滚动区域滑动卡顿，不顺畅问题
- 解决方法一：overflow-scrolling：touch; 给滚动区域添加overflow-scrolling：touch; -webkit-overflow-scrolling: touch; overflow-scrolling: touch; 解决方法二：overflow-y：visible; overflow-y: visible; ...
- 安卓机大面积接触导致touchmove事件的处理
- 看视频教程时，说到一个安卓机的bug，就是当手指点击页面的面积过大时会触发元素的滑动<em>事件</em>，这样会导致一些不想要的效果。就该问题实测了一番：&lt;!doctype html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;meta name="viewport"
- 关于移动端滑动卡顿现象的解决方案
- -webkit-overflow-scrolling: touch IOS 端特属属性，手指离开屏幕会保持滚动一段距离，继续滚动的速度和持续的时间和滚动手势的强烈程度成正比。 overflow: scroll; //该属性随着手指离开立即停止 -webkit-overflow-scrolling: touch;//该属性随着手指离开还会保持滚动 -webkit-transform: ...
- iscroll滑动卡顿问题
- 在新建IScroll对象之前，加入一行代码 原生DOM： document.querySelector('.nav-tabs-parent').addEventListener('<em>touchmove</em>',function(e){ e.preventDefault(); }); jQuery： $(".nav-tabs-parent").on('<em>touchmove</em>',...
- 移动端web开发---Touch事件详解
- 一、pc端<em>事件</em>回顾HTML<em>事件</em>、DOM0<em>事件</em>、DOM2<em>事件</em><em>事件</em>对象。如果上述概念不清楚，请先去了解。二、移动端<em>事件</em>简介2.1 pc端<em>事件</em>在移动端的问题 移动设备主要特点是不配备鼠标，键盘也只是在需要输入的地方才会激活虚拟机键盘。所以以前的pc端<em>事件</em>在移动端使用起来就没有以前那么爽了，虽然部分仍然可以使用。 click<em>事件</em>的300ms延迟问题。2007年第一代iphone发布，由于那个年代所
- Android 4.x touchmove事件兼容问题
- Android 4.x <em>touchmove</em><em>事件</em>兼容问题。 在开发 hybridApp 中，Android开发同事说在4.x的lg<em>手机</em>上，有滑不动的情况，看了之后发现是<em>touchmove</em><em>事件</em>的问题。在4.x中，<em>touchmove</em>滑动只会动
- 移动端 touchmove高频事件与requestAnimationFrame的结合优化
- 移动端最高频耗内存的的操作 莫属 <em>touchmove</em> 与scroll<em>事件</em> 两者需要 微观的 优化； 这里 我们 讲述 <em>touchmove</em>；<em>touchmove</em> <em>事件</em>发生很频繁，会比屏幕刷新率快，导致无效的渲染和重绘； 帧数 –显示设备通常的刷新率通常是50~60Hz –1000ms / 60 ≈ 16.6ms（1毫秒的优化意味着 6%的性能提升） <em>浏览器</em>对每一帧
- javaScript -- touch事件详解（touchstart、touchmove和touchend）
- 原文地址：https://blog.csdn.net/sinat_19327991/article/details/73823874 HTML5中新添加了很多<em>事件</em>，但是由于他们的兼容问题不是很理想，应用实战性不是太强，所以在这里基本省略，咱们只分享应用广泛兼容不错的<em>事件</em>，日后随着兼容情况提升以后再陆续添加分享。今天为大家介绍的<em>事件</em>主要是触摸...
- 手机端--1.手指拖动touchmove，e.touches[0].clientX
- 案例： 图片可以随着手指的拖动 而 变动 1.e.touches[0].clientX 手指横坐标 2. 最后所求 ： nowX, nowY 图片的横纵坐标 nowX = 手指横坐标 - 误差 3. 已知条件： 误差 deltaX = 手指横坐标 - nowX (一开始给个初始值) deltaX 固定 手指初始按下 与 手指移动的过...
- 移动端启用与禁用页面默认的touchmove事件
- 移动端,同一页面不同层的划动操作会造成相互影响,需要额外处理 如:页面层和弹出层(如picker选择划动)都有划动,同一个页面的不同层划动操作,造成相互影响,需要启用与禁用<em>touchmove</em>来处理. addEventListener()和removeEventListener()用于处理指定和删除<em>事件</em>处理程序操作,所有DOM节点中都包含这两种方法, 并动接受3个参数: element....
- touchmove在 部分android uc上面的滑动透传问题
- 先来看一组代码class test extends React.Component { render() { return ( }} onTouchStart={this.onTouchStart}
- 移动端的touchstart,touchmove,touchend事件中的获取当前touch位置
- 前提：touchstart,<em>touchmove</em>,touchend这三个<em>事件</em>可以通过原生和jq绑定。原生：document.querySelector("#aa").addEventListener('<em>touchmove</em>', function(){...});jq： $(".aa").on("<em>touchmove</em>",function (e) {...};1.获取当前touch位置 $('#webch...
- 移动端使用touchstart，touchmove，touchend实现图片轮播
- https://blog.csdn.net/m0_37568521/article/details/77836756
- H5 touchstart、touchmove、touchend 拖拽
- 1.获取鼠标位置 *clientX/clientY 相对<em>浏览器</em>窗口坐标（不会随着滚动条而变化，不包含工具栏、导航栏） event.clientX、event.clientY就是用来获取鼠标距游览器显示窗口的长度。 *pageX/pageY page为页面的意思，页面的高度一般情况client游览器显示区域装不下，所以会出现垂直滚动条。 鼠标距离页面初始page原点的长度。
- web移动端：touchmove实现局部滚动
- 总结一下最近项目用到的一个功能点，具体要求如下： body中会呈现一个可滚动的长页面，在点击某个按钮的时候，会出现一个弹出框，由于弹出框的内容较长，会出现滚动条，但是要保证位于弹框下部的body在弹框滚动的时候不触发滚动<em>事件</em>实现效果图如下： 一.css部分html,body{ margin:0; padding: 0; } .btn{ position: fixed;
- 使用jq实现手机上的touchmove效果
- Touch<em>事件</em>简介 pc上的web页面鼠 标会产生onmousedown、onmouseup、onmouseout、onmouseover、onmousemove的<em>事件</em>，但是在移动终端如 iphone、ipod Touch、ipad上的web页面触屏时会产生ontouchstart、on<em>touchmove</em>、ontouchend、ontouchcancel <em>事件</em>，分别对应了触屏开始、拖拽及完成触屏
- 解决移动端滑动不流畅问题
- //-webkit-overflow-scrolling : touch; 苹果css解决不流畅方法 var overscroll = function(el) { el.addEventListener('touchstart', function() { var top = el.scrollTop , totalScroll = el.scrollHeight , currentS...
- 解决移动端页面的touchstart和touchmove冲突
- 解决移动端页面的touchstart和<em>touchmove</em>冲突 最近在写一个小项目，移动端的投票工具，作为一个第一次写移动端的菜鸟，问题出现了： 为什么一滑屏幕就触发了一堆touchstart<em>事件</em>呀（摔！！！） 基本概念 touchstart<em>事件</em>：当手指触摸屏幕时候触发，即使已经有一个手指放在屏幕上也会触发。 <em>touchmove</em><em>事件</em>：当手指在屏幕上滑动的时候连续地触发。在这个事...
- web移动端 touchstar事件,touchmove事件 touchend事件
- web移动端开发中常用的三个<em>事件</em>,现在的智能机都是触屏操作.所以触摸在移动端的开发中几乎无处不在,下面介绍移动开发中常用的几个<em>事件</em> touchstart<em>事件</em>：当手指触摸屏幕时候触发，即使已经有一个手指放在屏幕上也会触发。 <em>touchmove</em><em>事件</em>：当手指在屏幕上滑动的时候连续地触发。在这个<em>事件</em>发生期间，调用preventDefault()<em>事件</em>可以阻止滚动。 touchend<em>事件</em>：当手指从屏幕上...
- 移动端的touchmove事件如何取得滑过元素的id?
- pc端的mouseover<em>事件</em>中能得到鼠标滑过的元素ID, 但<em>touchmove</em>好像只能得到第一下touch的元素id, 难道只能通过鼠标位置遍历元素来得到滑过的元素id吗?
- JQuery 获取touchstart,touchmove,touchend 坐标
- JQuery写法： 1 2 3 4 5 6 7 8 9 10 11 12 13 14 $('#id').on('touchstart',function(e) { var _touch = e.originalEvent.targetTo
- touchstart, touchmove, touchend, mousedown, mousemove, mouseup, 手机端和pc端点击及触摸事件
- touchstart<em>事件</em>：当手指触摸屏幕时候触发，即使已经有一个手指放在屏幕上也会触发。 <em>touchmove</em><em>事件</em>：当手指在屏幕上滑动的时候连续地触发。在这个<em>事件</em>发生期间，调用preventDefault()<em>事件</em>可以阻止滚动。 touchend<em>事件</em>：当手指从屏幕上离开的时候触发。 touchcancel<em>事件</em>：当系统停止跟踪触摸的时候触发。 initTouchEve
- 通过touch事件手写实现页面在移动端的触屏滚动功能
- 本文主要利用touch<em>事件</em>，实现了在触屏上的触摸滚动页面功能，类似<em>手机</em><em>浏览器</em>上原生的触屏滚动<em>事件</em>。 目前在PC和移动端的<em>浏览器</em>环境中，在有原生的鼠标滚轮滚动和触屏滚动功能的情况下，这个功能的使用场景应该是极其有限的。 写这个小功能的起因是：上周临时接手一个集成了chromium内核的客户端CS项目，完成demo后部署到surface上，鼠标滚轮滚动页面效果正常，但触屏不能滚动页面，...
- touchstart,touchmove,touchend触摸事件的小小实践心得
- 近段时间使用html5开发一个公司内部应用，而触摸<em>事件</em>必然是移动应用中所必须的，刚开始以为移动设备上或许也会支持鼠标<em>事件</em>，原来是不支持的，好在webkit内核的移动<em>浏览器</em>支持touch<em>事件</em>，并且打包成app也毫无压力。原本以为touch<em>事件</em>应该跟鼠标<em>事件</em>是一样的道理，实践过程中虽然不难，但还是碰到了不少坑，才发现还是略有区别的。$(document).bind(touchEvents.touchs
- touchstart ,touchmove, touchend 页面随手指滑动
- js写法 //详情页滑出效果 function swipePage(){//页面滑动切换效果 //$("#goodsdetil").animate({right:-(e.pageX)}/*,400,function(){$("#goodsMealDiv").empty();}*/); //$('body').css("overflow","hidden");
- html 移动互联网终端的javascript touch事件,touchstart, touchend, touchmove
- 前言 如果我们允许用户在页面上用类似桌面<em>浏览器</em>鼠标手势的方式来控制WEB APP，这个页面上肯定是有很多可点击区域的，如果用户触摸到了那些可点击区域怎么办呢?? 诸如智能<em>手机</em>和平板电脑一类的移动设备通常会有一个电容式触摸屏（capacitive touch-sensitive screen），以捕捉用户的手指所做的交互。随着移动网络的发展，其能够支持越来越复杂的应用，web开发者需要一种方
- 在OnMouseMove（）中绘图怎样才不闪烁？
- 在OnMouseMove（）中绘图怎样才不闪烁？ 我用InvalidRect(rect) 和 SetRop(R2_NOT) 都感觉有明显的闪烁，尤其在画填充的面状目标尤为突出， 不知道能不能解决。 多
- OnMouseMove快速滑动时重绘无效区域时，CPU达100%
- 我在OnMouseMove时拖拽图片不放，快速的滑动，CPU达到90%以上，后台播放的音乐一卡一卡的 在OnMouseMove我用InvalidateRect来发出重绘无效矩形块，在OnPaint中用
- onmousemove与onmouseenter与onmouseout有差别
- onmouseenter<em>事件</em>：当鼠标移入元素对象的边界之内时，激活该<em>事件</em> 不支持冒泡，由于这个差异，当鼠标在元素边界内移动时，不会激活onmouseenter(只在鼠标进入元素边界内时激活)，但会激活onmouseover(当该元素包含子元素时)。 是否可以取消： 不可以取消 <em>事件</em>类型：MouseEvent 支持的标签：所有 HTML 元素，除了: , , <br
- OnMouseMove移动位置和OnMouseWheel缩放实现
- 1. 基本作用 OnMouseMove响应鼠标移动时间 OnMouseWheel响应鼠标中键的滚动 2. 参数说明 afx_msgvoidOnMouseMove(UINTnFlags, CPointpoint); nFlags说明：指示虚拟按键是否按下 ，此参数可以是任何下列值的组合 MK_CONTROL 当CTRL键按下时 MK_LBUTTON 当鼠标左键
- 这种小问题大家是怎么解决的？onmousemove问题
- 我的窗体上有N个speedbutton按钮，紧密相连，当鼠标在上面快速晃过时，总有几个按钮在onmousemove时突起，移到别处后没有还原成原来的状态，如果鼠标慢慢移过就没有此问题，不知道大家碰到这
- 使用onmousemove事件实现移动（拖拽）div 出现的关于offsetX的问题
- 出现的问题如下图所示（截屏看不出来看log）再移动鼠标的过程中会不断的出现异常值导致拖动的div不断切换位置，回到左上角。我以为是冒泡机制导致的所以添加了下面一段阻止冒泡，随便也阻止了默认<em>事件</em>，但是并没有效果==================================================================ev.preventDefault();if (ev.sto...
- 为何OnMouseMove消息响应如此慢？
- OnMouseMove消息在单步执行很正常，但是直接运行就不行。不过鼠标移的很慢也可以，为什么？在消息内是否需要对CPoint的坐标进行ScreenToClient转换？
- touchmove在android下面只触发一次的奇葩设定
- <em>touchmove</em><em>事件</em>只触发一次的问题 在Android下直接使用<em>touchmove</em><em>事件</em>会在很多<em>浏览器</em>中出现每次操作只触发一次<em>touchmove</em>的情况。这是因为Android中对触屏<em>事件</em>奇葩解析造成的，在其它系统上没有这个情况。我们可以在touchstart<em>事件</em>中加入preventDefalut来解决，但这会带来其它问题。 运行wid
- 关于touch事件的使用 （touchStart touchMove touchEnd（不触发 android 4.0以上）） 滑动的使用
- 最近在移动端使用touch<em>事件</em>的时候，遇到了一些问题 ，下面是一些心得， <em>手机</em>端经常会有有一些上拉加载，下拉刷新， 左右滑动删除的应用场景， 在不借助第三方插件的时候，无疑会用到touch<em>事件</em>，在谷歌<em>浏览器</em>开发时并没有出现任何问题，结果在<em>手机</em>端<em>测试</em>时各种问题便出来了， 亲测在 Android 4.0 上面的<em>浏览器</em>手指页面上做滑动操作，然后手指离开，结果不会触发 touchend <em>事件</em>。同样的...
- 使用javascript实现手机上的touchmove效果
- javascript <em>手机</em>手势动作touch触屏原理分析
- html 移动互联网终端的javascript touch事件,touchstart, touchend, touchmove
- 前言 如果我们允许用户在页面上用类似桌面<em>浏览器</em>鼠标手势的方式来控制WEB APP，这个页面上肯定是有很多可点击区域的，如果用户触摸到了那些可点击区域怎么办呢?? 诸如智能<em>手机</em>和平板电脑一类的移动设备通常会有一个电容式触摸屏（capacitive touch-sensitive screen），以捕捉用户的手指所做的交互。随着移动网络的发展，其能够支持越来越复杂的应用，web开发者需要一种方法来处
- js实现一个可以兼容PC端和移动端的div拖动效果
- 前段时间写了一个简单的div拖动效果，不料昨天项目上正好需要一个相差不多的需求，就正好用上了，但是在移动端的时候却碰到了问题，拖动时候用到的三个<em>事件</em>：mousedown、mousemove、mouseup在移动端都不起任何作用。毕竟移动端是没有鼠标的，查资料后发现，在移动端与之相对应的分别是：touchstart、<em>touchmove</em>、touchend<em>事件</em>。还有一点要注意的是在PC端获取当前鼠标的坐标
- HTML5实战与剖析之触摸事件(touchstart、touchmove和touchend)
- touchstart<em>事件</em>：当手指触摸屏幕时候触发，即使已经有一个手指放在屏幕上也会触发。 <em>touchmove</em><em>事件</em>：当手指在屏幕上滑动的时候连续地触发。在这个<em>事件</em>发生期间，调用preventDefault()<em>事件</em>可以阻止滚动。 touchend<em>事件</em>：当手指从屏幕上离开的时候触发。 touchcancel<em>事件</em>：当系统停止跟踪触摸的时候触发。关于这个<em>事件</em>的确切出发时间，文档中并没有具体说明，咱们只能去猜测了。
- 移动web JavaScript手指滑动事件的封装(touchstart,touchmove,touchend)
- demo.html：&lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;meta name="viewport" content="width=device-width, user-scalable=no,
- 小程序 自定义弹窗后禁止屏幕滚动（滚动穿透）
- 弹出 fixed 弹窗后，在弹窗上滑动会导致下层的页面一起跟着滚动。解决方法：在弹出层加上 catch<em>touchmove</em> <em>事件</em> 示例代码：&lt;view class="modal-view" hidden="{{!showModal}}" bindtap="toggleModal" catch<em>touchmove</em>="preventTouchMove"&gt; &lt;view class="m
- 关于取消touchmove绑定问题
- 写了一个向下滑解锁的页面，有一个div跟着手指滑动。 其中下滑到指定位置时会弹框，此时需要div保持在那个位置并且手指就算不松手也滑不动了。 百度了一下，试了unbind（）但是没有效果。。假如不松手
- 如何让touchmove之后不触发touchend的事件
- 当前快件追踪 以前的项目上有很多这样的代码
- 移动端touchmove事件边界touchend不触发
- 做<em>前端</em>一年整，碰到不少问题，以前都是找资源，解决问题，不会去分享资源，这次是我第一次写博客，如果有什么问题，欢迎来交流。 在过去一年的时间里，我所接触的多有是移动端的项目，移动<em>前端</em>中，touch触摸<em>事件</em>经常会涉及到，轮播图，上拉加载，都要用到touch<em>事件</em>，有用过插件，也有自己写过一些<em>事件</em>。关于touch<em>事件</em>中关键的3个<em>事件</em> touchstart, <em>touchmove</em>, touchend
- js中的touch事件及gesture(手势)事件详解 — 第13.4.9节
- 一：touch<em>事件</em>分类？ 1. touchstart：当手指触摸屏幕时触发。不管有多少个手指放在了屏幕上，只要再触摸一下屏幕就会触发。在此，我用小米的google<em>浏览器</em>做了一个实验，添加一个计数器，用来查看屏幕上手指触摸的次数，代码如下： window.onload = function(){ var i = 0; document.addEventListe
- jQuery -- touch事件之滑动判断（左右上下方向）
- js代码：$("body").on("touchstart", function(e) { // 判断默认行为是否可以被禁用 if (e.cancelable) { // 判断默认行为是否已经被禁用 if (!e.defaultPrevented) { e.preventDefault(); } }
- HTML5移动端开发的常用触摸事件
- HTML5移动端开发的常用触摸<em>事件</em>
- 移动web JavaScript,事件(touchstart,touchmove,touchend)
- demo（认识点击时间差）.html：&lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scal...
- 程序员实用工具网站
- 目录 1、搜索引擎 2、PPT 3、图片操作 4、文件共享 5、应届生招聘 6、程序员面试题库 7、办公、开发软件 8、高清图片、视频素材网站 9、项目开源 10、在线工具宝典大全 程序员开发需要具备良好的信息检索能力，为了备忘（收藏夹真是满了），将开发过程中常用的网站进行整理。 1、搜索引擎 1.1、秘迹搜索 一款无敌有良心、无敌安全的搜索引擎，不会收集私人信息，保...
- 我花了一夜用数据结构给女朋友写个H5走迷宫游戏
- 起因 又到深夜了，我按照以往在csdn和公众号写着数据结构！这占用了我大量的时间！我的超越妹妹严重缺乏陪伴而 怨气满满！ 而女朋友时常埋怨，认为数据结构这么抽象难懂的东西没啥作用，常会问道：天天写这玩意，有啥作用。而我答道：能干事情多了，比如写个迷宫小游戏啥的！ 当我码完字准备睡觉时：写不好别睡觉！ 分析 如果用数据结构与算法造出东西来呢？ ...
- 别再翻了，面试二叉树看这 11 个就够了~
- 写在前边 数据结构与算法： 不知道你有没有这种困惑，虽然刷了很多算法题，当我去面试的时候，面试官让你手写一个算法，可能你对此算法很熟悉，知道实现思路，但是总是不知道该在什么地方写，而且很多边界条件想不全面，一紧张，代码写的乱七八糟。如果遇到没有做过的算法题，思路也不知道从何寻找。面试吃了亏之后，我就慢慢的做出总结，开始分类的把数据结构所有的题型和解题思路每周刷题做出的系统性总结写在了 Github...
- 让程序员崩溃的瞬间（非程序员勿入）
- 今天给大家带来点快乐，程序员才能看懂。 来源：https://zhuanlan.zhihu.com/p/47066521 1. 公司实习生找 Bug 2.在调试时，将断点设置在错误的位置 3.当我有一个很棒的调试想法时 4.偶然间看到自己多年前写的代码 5.当我第一次启动我的单元<em>测试</em>时 ...
- 接私活必备的 10 个开源项目！
- 点击蓝色“GitHubDaily”关注我加个“星标”，每天下午 18:35，带你逛 GitHub！作者 | SevDot来源 | http://1t.click/VE8W...
- GitHub开源的10个超棒后台管理面板
- 目录 1、AdminLTE 2、vue-Element-Admin 3、tabler 4、Gentelella 5、ng2-admin 6、ant-design-pro 7、blur-admin 8、iview-admin 9、material-dashboard 10、layui 项目开发中后台管理平台必不可少，但是从零搭建一套多样化后台管理并不容易，目前有许多开源、免费、...
- Git 天天用 但是 Git 原理你了解吗？
- Git 原理 做技术一定要知其然知其所以然，意思就是：知道它是这样的，更知道它为什么是这样的。我主要通过4块内容来简单介绍 Git 是原理是什么样的。这4块内容如下： Git 存储目录结构介绍 Git 是如何存储的 Git 的对象 Git引用 当然 Git 原理不仅仅包含这些，想要更深入了解请查看官方教程 https://git-scm.com/book/zh/v2/。 本文内容是我在 Git...
- 终于明白阿里百度这样的大公司，为什么面试经常拿ThreadLocal考验求职者了
- 点击上面↑「爱开发」关注我们每晚10点，捕获技术思考和创业资源洞察什么是ThreadLocalThreadLocal是一个本地线程副本变量工具类，各个线程都拥有一份线程私...
- 100 个网络基础知识普及，看完成半个网络高手
- 欢迎添加华为云小助手微信（微信号：HWCloud002或HWCloud003），输入关键字“加群”，加入华为云线上技术讨论群；输入关键字“最新活动”，获取华为云最新特惠促销。华为云诸多技术大咖、特惠活动等你来撩！ 1）什么是链接？ 链接是指两个设备之间的连接。它包括用于一个设备能够与另一个设备通信的电缆类型和协议。 2）OSI 参考模型的层次是什么？ 有 7 个 OSI 层：物理...
- 为什么面向对象糟透了？
- 又是周末，编程语言“三巨头”Java, Lisp 和C语言在Hello World咖啡馆聚会。服务员送来咖啡的同时还带来了一张今天的报纸， 三人寒暄了几句， C语言翻开了...
- 分享靠写代码赚钱的一些门路
- 作者 mezod，译者 josephchang10如今，通过自己的代码去赚钱变得越来越简单，不过对很多人来说依然还是很难，因为他们不知道有哪些门路。今天给大家分享一个精彩...
- 对计算机专业来说学历真的重要吗？
- 我本科学校是渣渣二本，研究生学校是985，现在毕业五年，校招笔试、面试，社招面试参加了两年了，就我个人的经历来说下这个问题。 这篇文章很长，但绝对是精华，相信我，读完以后，你会知道学历不好的解决方案，记得帮我点赞哦。 先说结论，无论赞不赞同，它本质就是这样：对于技术类工作而言，学历五年以内非常重要，但有办法弥补。五年以后，不重要。 目录： 张雪峰讲述的事实 我看到的事实 为什么会这样 ...
- 世界上最好的学习法：费曼学习法
- 你是否曾幻想读一遍书就记住所有的内容？是否想学习完一项技能就马上达到巅峰水平？除非你是天才，不然这是不可能的。对于大多数的普通人来说，可以通过笨办法（死记硬背）来达到学习的目的，但效率低下。当然，也可以通过优秀的学习法来进行学习，比如今天讲的“费曼学习法”，可以将你的学习效率极大的提高。 费曼学习法是由加拿大物理学家费曼所发明的一种高效的学习方法，费曼本身是一个天才，13岁自学微积分，24岁加入曼...
- 学Linux到底学什么
- 来源：公众号【编程珠玑】 作者：守望先生 网站：https://www.yanbinghu.com/2019/09/25/14472.html 前言 我们常常听到很多人说要学学Linux或者被人告知说应该学学Linux，那么学Linux到底要学什么？ 为什么要学Linux 在回答学什么之前，我们先看看为什么要学。首先我们需要认识到的是，很多服务器使用的是Linux系统，而作为服务器应...
- 深入理解C语言指针
- 一、指针的概念 要知道指针的概念，要先了解变量在内存中如何存储的。在存储时，内存被分为一块一块的。每一块都有一个特有的编号。而这个编号可以暂时理解为指针，就像酒店的门牌号一样。 1.1、变量和地址 先写一段简单的代码： void main(){ int x = 10, int y = 20; } 这段代码非常简单，就是两个变量的声明，分别赋值了 10、20。我们把内存当做一个酒店，而每个房间就...
- C语言实现推箱子游戏
- 很早就想过做点小游戏了，但是一直没有机会动手。今天闲来无事，动起手来。过程还是蛮顺利的，代码也不是非常难。今天给大家分享一下~ 一、介绍 开发语言：C语言 开发工具：Dev-C++ 5.11 日期：2019年9月28日 作者：ZackSock 也不说太多多余的话了，先看一下效果图： 游戏中的人物、箱子、墙壁、球都是字符构成的。通过wasd键移动，规则的话就是推箱子的规则，也就不多说了。 二、代...
- 面试官：兄弟，说说基本类型和包装类型的区别吧
- Java 的每个基本类型都对应了一个包装类型，比如说 int 的包装类型为 Integer，double 的包装类型为 Double。基本类型和包装类型的区别主要有以下 4 点。
- 8000字干货：那些很厉害的人是怎么构建知识体系的
- 本文约8000字，正常阅读需要15~20分钟。读完本文可以获得如下收益： 分辨知识和知识体系的差别 理解如何用八大问发现知识的连接点； 掌握致用类知识体系的构建方法； 能够应用甜蜜区模型找到特定领域来构建知识体系。 1. 知识体系？有必要吗？ 小张准备通过跑步锻炼身体，可因为之前听说过小腿变粗、膝盖受伤、猝死等等与跑步有关的意外状况，有点担心自己会掉进各种坑里，就在微信上问朋友圈一直晒跑步...
- Android完整知识体系路线(菜鸟-资深-大牛必进之路)
- 前言 移动研发火热不停，越来越多人开始学习Android 开发。但很多人感觉入门容易成长很难，对未来比较迷茫，不知道自己技能该怎么提升，到达下一阶段需要补充哪些内容。市面上也多是谈论知识图谱，缺少体系和成长节奏感，特此编写一份 Android 研发进阶之路，希望能对大家有所帮助。 由于篇幅过长，有些问题的答案并未放在文章当中，不过我都整理成了一个文档归纳好了，请阅读到文末领取~ Ja...
- 网易云音乐你喜欢吗？你自己也可以做一个
- 【公众号回复 “1024”，免费领取程序员赚钱实操经验】今天我章鱼猫给大家带来的这个开源项目，估计很多喜欢听音乐的朋友都会喜欢。就目前来讲，很多人对这款音乐 App 都抱...
- 前端开发必备网站推荐
- 本人是一个纯正的小白，在学习的过程中搜集了一些关于<em>前端</em>开发的网站，希望对大家能够有所帮助！授人以鱼不如授人以渔！ 1.MDN开发者文档网址:https://developer.mozilla.org/zh-CN/ 2.菜鸟教程:https://www.runoob.com/html/html-tutorial.html 3.CSS教程:https://www.schoolw3c.com/html-...
- 中国物联网激荡20年
- 故事还要从24年前那个夏天说起。 ** 1 ** 1995年的夏天，美国西海岸有一个中年人出版了一本叫《未来之路》的书籍，这本书是大家了解信息高速公路全部面目乃至21世纪人类生活面貌的入门书。在这本书中，这个中年人多次提到“物物互联”的设想。但是由于当时网络技术与传感器应用水平的限制，中年人朦胧的“物联网”理念没有引起重视。对了，这个中年人后面做了十几次世界首富！ 说回国内，那时风还没有起来，科技...
- 十大优秀编程项目，让你的简历金光闪闪
- 全文共3241字，预计学习时长6分钟 被问到如何学习编程时，最常听到的问题就是：“有没有什么新项目的好点子？” 一些老套的答案有：“做一个象棋游戏”或者“命令行界面”。 这些答案没有错，但这些例子不符合现代编程的需要。现代软件编写需要经常使用软件服务化（SaaS）和网络应用，这意味着程序员需要了解如何在线编程。 用户网站或应用程序的编程需要服务器、身份验证和数据库，这个过程十分复杂。它...
- 第二弹！python爬虫批量下载高清大图
- 文章目录前言下载免费高清大图下载带水印的精选图代码与总结 前言 在上一篇写文章没高质量配图？python爬虫绕过限制一键搜索下载图虫创意图片！中，我们在未登录的情况下实现了图虫创意无水印高清小图的批量下载。虽然小图能够在一些移动端可能展示的还行，但是放到pc端展示图片太小效果真的是很一般！建议阅读本文查看上一篇文章，在具体实现不做太多介绍，只讲个分析思路。 当然，本文可能技术要求不是特别高，但可以...
- Sybase ODBC驱动下载
- Sybase ODBC驱动 Sybase ODBC驱动 相关下载链接：[url=//download.csdn.net/download/discovery10/2216477?utm_source=bbsseo]//download.csdn.net/download/discovery10/2216477?utm_source=bbsseo[/url]
- vb Access操作下载
- vb Access操作 相关下载链接：[url=//download.csdn.net/download/cleverhorse/4044479?utm_source=bbsseo]//download.csdn.net/download/cleverhorse/4044479?utm_source=bbsseo[/url]
- FTP自动上传下载
- 用户可以手动下载也可以自动下载远程文件； 注意内部有个相当关键的类 相关下载链接：[url=//download.csdn.net/download/sznszbd/5573135?utm_source=bbsseo]//download.csdn.net/download/sznszbd/5573135?utm_source=bbsseo[/url]
我们是很有底线的