前端速成：双月Java之旅（week6）_day2

今天学习的内容首先是移动端事件。

移动端事件列表如下：

        touchstart：元素上触摸开始时触发，可用于元素触摸的交互，比如页面跳转，标签页切换；

        touchmove：元素上触摸移动时触发，可用于页面的滑动特效，比如网页游戏，画板；

        touchend：手指从元素上离开时触发，该事件主要跟touchmove事件组合使用；

        touchcancel：触摸被打断时触发，使用率不高。

使用方法是：首先定义一个<div id="demo">，然后定义 const demo=document.getElementById('demo')，最后调用demo.addEventListener('touchstart',()=>{demo.innerHTML='开始触摸盒子'})

接着学习的是点击穿透事件，适用于touch开头的事件，然后在事件的回调当中引起发生事件的消失，而后有个点击click的默认事件会执行，容易误触进入其他页面。解决方案是在addEventListener('touchstart',(event)=>{event.preventDefault() })，直接把默认事件清楚就可以。

其他解决方案包括

        1.将其他元素的触发由click替换为touch

banner_img.addEventListener('touchstart',()=>{

        location.href='#'

})

        2.让下层的元素暂时失去click事件，300毫秒左右再复原

#anode{

        pointer-event:none;

}

btn.addEventListener('touchstart',()=>{

        shade.style.display='none'

        setTimeout(()=>{

                anode.style.pointerEvents='auto'},300)        

}

        3. 让隐藏的元素延迟300毫秒再隐藏

btn.addEventListener('touchstart',()=>{

        setTimeout(()=>{

                shade.style.display='none'

        },300)        

}