03_移动端事件基础

最新推荐文章于 2022-08-11 16:13:13 发布

原创最新推荐文章于 2022-08-11 16:13:13 发布 · 178 阅读

0 ·

CC 4.0 BY-SA版权

移动端专栏收录该内容

6 篇文章

订阅专栏

本文深入探讨了移动端事件处理的基础，包括querySelector的使用陷阱，移动端与PC端事件的区别，如touchstart、touchmove和mousedown等。同时，文章提供了阻止事件默认行为的方法，解决了事件点透问题，并介绍了移动端常见问题及解决方案。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

移动端事件基础

queryselector的坑

queryselectorAll：静态列表
queryselector：静态列表的第一个

移动端事件

移动端事件：触屏事件、指针时间（用的少）

移动端: touchstart touchmove(不可能单独触发) touchend
pc端： mousedown mousemove(可以单独触发) mouseup

阻止事件的默认行为，阻止事件的冒泡

ev.preventDefault(); ev.stopPropagation();

阻止事件的默认行为可以查看 event.cancelable 属性来判断一个事件
的默认动作是否可以被取消.
cancelable属性为true的事件上调用 preventDefault才生效

怎么全局阻止默认事件

隐患：页面所有滚动条失效
解决：自定义系统滚动条

document.addEventListener("touchstart",function(ev){
    ev=ev||event;
    ev.preventDefault();
    // 注：在pc端测试会报错，但在真机上是正常的
})

事件点透

1.pc端的事件可以在移动端触发
2.PC端事件有300毫秒延迟
3.移动端事件不会有延迟

主要表现：
    覆盖层下的超链接会被触发；
    跳转后相同位置元素会被点击
    
解决办法：
    1.不要混用touch和click
    2.全局阻止默认事件+移动端跳转方案

event 3类手指列表

changedTouches:触发当前事件的手指列表
targetTouches:触发当前事件时元素上的手指列表
touches:触发当前事件时屏幕上的手指列表

移动端常见问题

-webkit-appearance:none //解决圆角按钮过圆

font boosting //max-height: 999999px;

禁止电话与邮箱：
<meta name="format-detection"content="telephone=no,email=no"/>
需要使用时，用a标签：
<a href="tel:110">1383838438</a>
<a href="mailto:13888@qq.com">1383838438</a>

取消右键菜单：

右键监听：contextmenu
左键监听：click

document.oncontextmenu=function(){
	return false;
	// 如果其中某个元素需要右键菜单，
	// 可以通过阻止事件冒泡行为来实现
	/*
	给元素加contextmenu监听
	ev = ev || event
	ev.stopPropagation();
	*/
}

移动端模板：

meta标签
全面阻止事件默认行为
一个适配方案

ie6常见兼容性问题：

ie6最小高度问题
ie6最小高度是19px
解决办法：
    父容器font-size设为0，最小高度2px,默认不会小于19px