全国服务热线:4008-888-888

技术知识

HTML5触碰恶性事件完成挪动端简单进度条的完成方

序言

HTML中新加上了很多新的恶性事件,但因为适配性的难题,很多恶性事件都沒有普遍的运用,接下来为大伙儿详细介绍1些功能强大的挪动端触碰恶性事件: touchstart、touchmove、touchend。

详细介绍

下面大家来简易详细介绍1下这几个恶性事件:

  1. touchstart: 当手指触碰显示屏情况下开启,即便早已有1个手指放在显示屏上也会开启。
  2. touchmove:当手指在显示屏上拖动的情况下持续地开启。在这个恶性事件产生期内,启用preventDefault()恶性事件能够阻拦翻转。
  3. touchend:当手指从显示屏上离去的情况下开启。

这些触碰恶性事件具备普遍的dom特性。另外,她们还包括着3个用于追踪触碰的特性:

  1. touches:表明当今追踪的触碰实际操作的touch目标的数字能量数组。
  2. targetTouches:特殊于恶性事件总体目标的Touch目标的数字能量数组。
  3. changeTouches:表明自之前触碰以来产生了甚么更改的Touch目标的数字能量数组。

每一个touch目标包括的特性以下:

  1. clientX:触碰总体目标在视口中的x座标。
  2. clientY:触碰总体目标在视口中的y座标。
  3. pageX:触碰总体目标在网页页面中的x座标。
  4. pageY:触碰总体目标在网页页面中的y座标。
  5. screenX:screenX:触碰总体目标在显示屏中的x座标。
  6. screenY:screenX:触碰总体目标在显示屏中的x座标。
  7. identifier:标志触碰的唯1ID。
  8. target:screenX:触碰总体目标在显示屏中的x座标。

掌握了触碰恶性事件的特点,那就刚开始焦虑不安刺激性的实战演练阶段吧

实战演练

下面大家来根据应用触碰恶性事件来完成1个挪动端可拖动的进度条

大家优秀行HTML的合理布局

<div class="progress-wrapper">
    <div class="progress"></div>
    <div class="progress-btn"></div>
</div>

CSS一部分此处省略

获得dom元素,并原始化触碰起始点和按钮离器皿最左方的间距

const progressWrapper = document.querySelector('.progress-wrapper')
const progress = document.querySelector('.progress')
const progressBtn = document.querySelector('.progress-btn')
const progressWrapperWidth = progressWrapper.offsetWidth

let touchPoint = 0
let btnLeft = 0

监视touchstart恶性事件

progressBtn.addEventListener('touchstart', e => {
    let touch = e.touches[0]
    touchPoint = touch.clientX // 获得触碰的原始部位
 btnLeft = parseInt(getComputedStyle(progressBtn, null)['left'], 10) // 此处忽视IE访问器适配性
})

监视touchmove恶性事件

progressBtn.addEventListener('touchmove', e => {
e.preventDefault()
    let touch = e.touches[0]

    let diffX = touch.clientX - touchPoint // 根据当今部位与原始部位之差测算更改的间距
    let btnLeftStyle = btnLeft + diffX // 为按钮界定新的left值

    touch.target.style.left = btnLeftStyle + 'px'

    progress.style.width = (btnLeftStyle / progressWrapperWidth) * 100 + '%' // 根据按钮的left值与进度条器皿长度的比值,测算进度条的长度百分比
})

根据1系列的逻辑性运算,大家的进度条早已基础完成了,可是发现了1个难题,当触碰部位超过进度条器皿时,会造成bug,大家再来做1些限定

if (btnLeftStyle > progressWrapperWidth) {
    btnLeftStyle = progressWrapperWidth
    } else if (btnLeftStyle < 0) {
    btnLeftStyle = 0
}

至此,1个简易的挪动端翻转条就完成了

以上便是本文的所有內容,期待对大伙儿的学习培训有一定的协助,也期待大伙儿多多适用脚本制作之家。



在线客服

关闭

客户服务热线
4008-888-888


点击这里给我发消息 在线客服

点击这里给我发消息 在线客服