移动端事件基础
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