移动端|移动端 touch事件过渡事件动画事件 touch事件|过渡事件|动画事件

移动端首先要书写meta标签

移动端touch事件和鼠标点击事件
移动端的事件是新增的，touch事件也叫触摸事件。因为手指的行为叫触摸。鼠标的行为叫点击。
鼠标的点击事件依然支持，只是有300ms的延迟。
为什么要有300ms的延迟，为了检测是否是双击。
当绑定了onclick 和 touchstart事件的时候，首先是touchstart事件先触发

Document - 锐客网 * { margin: 0; padding: 0; } #container { width: 100%; height: 40px; background-color: red; } 你好

文章图片

移动端touch事件
touchstart（）触摸开始事件
touchmove（）触摸移动事件
touchend（）触摸结束事件
注：touch事件需要用DOM2级进行事件绑定，DOM1级事件绑定不上

- 锐客网 * { margin: 0; padding: 0; } #box { width: 100%; height: 100px; background-color: red; }

【移动端|移动端 touch事件过渡事件动画事件】touch事件的事件对象event

touchstart 和 touchmove 可以通过event.thouches 来获取手指信息

touchend事件不能通过event.thouches来获取手指信息，是因为此时手指已经离开了屏幕，所以要通过event.changedTouches来获取手指的信息

- 锐客网 * { margin: 0; padding: 0; } #box { width: 100%; height: 100px; background-color: red; }

过渡事件和动画事件

当一个元素过渡开始时候，不会执行transionstart 事件，过渡开始没有transionstart 事件
当一个元素过渡完成时候，会执行transionend 事件
当一个元素动画开始的时候，会触发animationstart 事件
当一个元素动画结束的时候，会触发animationend 事件

Document - 锐客网 * { margin: 0; padding: 0; } #box { position: absolute; top: 0; left: 0; width: 100px; height: 100px; background-color: red; transition: all 1s ease 0s; } #box.cur { left: 100px; } #box1 { position: absolute; top: 100px; left: 0; width: 100px; height: 100px; background-color: blue; /* animation: go 1s ease 1s 3 alternate; */ } /*定义动画*/ @keyframes go { form { left: 0px; } to { left: 100px; } }