h5 touch和h5 clickk都要用怎么办

来源：蜘蛛抓取(WebSpider) 时间：2016-10-18 01:34 标签： touchend click 冲突
H5中的touch事件 - 推酷
H5中的touch事件
最近刚好弄了一个关于在移动端的滚动条，多多少少有点感触！
touch中共有touchstart、touchmove和touchend三个事件；
touchstart：触摸开始的时候触发
touchmove：手指在屏幕上滑动的时候触发
touchend：触摸结束的时候触发
每个触摸事件都包括了三个触摸列表，每个列表里包含了对应的一系列触摸点（用来实现多点触控）：
touches：当前位于屏幕上的所有手指的列表；
targetTouches：位于当前DOM元素上的手指列表；
changedTouches
涉及当前事件手指的列表。
每个触摸点由包含了如下触摸信息（常用）：
dentifier：
一个数值，唯一标识触摸会话（touch session）中的当前手指。
一般为从0开始的流水号（android4.1，uc）
DOM元素，是动作所针对的目标。
clientY/screenX/screenY
一个数值，
动作在屏幕上发生的位置（page包含滚动距离,client不包含滚动距离，screen则以屏幕为基准）。
下面是我用几种方法对touch事件的 应用：
第一种方法：
1 function load() {
document.addEventListener('touchstart', touch, false);
document.addEventListener('touchmove', touch, false);
document.addEventListener('touchend', touch, false);
function touch(event) {
var event = event || window.
var oParent = document.getElementById("prog");
var oDiv = document.getElementById("div");
var oDiv1 = document.getElementById("div1")
var touch = event.targetTouches[0];
switch (event.type) {
case "touchstart":
case "touchend":
case "touchmove":
event.preventDefault();
var l = touch.clientX-oParent.offsetL
console.log(l)
if (l &= 0) {
} else if (l &= oParent.offsetWidth-oDiv.offsetWidth) {
l = oParent.offsetWidth - oDiv.offsetW
var oWidth = (l / oParent.offsetWidth) * 800;
oDiv.style.left = l + "px"
oDiv1.style.width = oWidth + 25 + "px";
window.addEventListener('load', load, false);
第二种方法：
1 window.onload=function(){
btn=document.getElementById("div");
bg=document.getElementById("div1");
var oP=document.getElementById("prog");
var W=oP.offsetW
console.log(W)
var ox,ex,
btn.addEventListener("touchstart",function(e){
e.preventDefault();
ox=e.touches[0].clientX;
startX=btn.offsetLeft+3;
//console.log(startX);
btn.addEventListener("touchmove",function(e){
e.preventD
ex=e.changedTouches[0].clientX;
endx=ex-ox+startX;
//console.log(endx)
if(endx&=0){
}else if(endx&=W-btn.offsetWidth){
endx=W-btn.offsetW
var oWidth=(endx/W)*W;
console.log(oWidth)
btn.style.left=endx+"px";
bg.style.width=oWidth+45+"px";
btn.addEventListener("touchend",function(){
btn.removeEventListener("touchmove");
btn.removeEventListener("tocched");
以上就是一些关于对touch的理解。
已发表评论数()
请填写推刊名
描述不能大于100个字符!
权限设置： 公开
仅自己可见
正文不准确
标题不准确
排版有问题
主题不准确
没有分页内容
图片无法显示
视频无法显示
与原文不一致Copyrignh(c).All Reserved V 1.3.5css移动端实现与pc端一样的:acitve效果
作者：佚名
字体：[ ] 来源：互联网 时间：10-13 17:40:41
移动前端如何与pc端那样的一个:hover的效果，在看美团h5的页面时发现他们做对这个效果做得很好，它们只是多了一行代码而已，对body绑定了一个touchstart事件
做移动前端也有一些日子了，一直有个问题没有解决，就是与pc端那样的一个:hover的效果，:hover是鼠标指针浮动在其上的元素的一个选择器，但因为在移动端是没有鼠标的，代替的是触摸屏，用户也不是有&鼠标指针浮动在其上的元素&的情况，有也很少。 所以取代的应该:active这个选择器，但是通过实践，发现情况不是很理想，在QQ浏览器上有时触发，有没不触发，在我mx3带自浏览器上根本没效果。 最近在看美团h5的页面时发现他们做对这个效果做得很好（这里说实话，美团网在h5这一块做得真好），看了他们代码之后，发现他们也是用:active来实现这个效果，但他们多了一行js代码， 代码如下:document.body.addEventListener('touchstart', function () { }); 其实这行代码带没有做什么事，只是对body绑定了一个touchstart事件，然后也没做什么事。 自已实践了一下发现可以了，效果真心不错。赞一下美团。 ps:在移动端中浏览器会有自带的一个点击高亮效果，可以通过给a标签或者body,html加&代码如下:-webkit-tap-highlight-color:都行。
大家感兴趣的内容
12345678910
最近更新的内容【appium自动化测试 app中有混合H5页面开发，页面绑定的是touchstart事件，如何触发此类事件】-突袭网
11:35:56【 转载互联网】 作者： &&|&责编：李强
&&& &为了解决用户可能碰到关于"appium自动化测试 app中有混合H5页面开发，页面绑定的是touchstart事件，如何触发此类事件"相关的问题，突袭网经过收集整理为用户提供相关的解决办法，请注意，解决办法仅供参考，不代表本网同意其意见,如有任何问题请与本网联系。"appium自动化测试 app中有混合H5页面开发，页面绑定的是touchstart事件，如何触发此类事件"相关的详细问题如下:appiumapp?混合H5touchstartappium自动化测试&app中有混合H5页面开发，页面绑定的是touchstart事件，如何触发此类事件===========突袭网收集的解决方案如下===========
暂时还未收集到解决方案,如您有解决办法请在下面留言回答

我要回帖

更多关于 touchend click 冲突 的文章

 

随机推荐