这些事件可以通过JavaScript来进行处理。我们可以使用事件监听器将特定的事件与特定的元素关联起来,从而在事件触发时执行相应的操作。此外,在一些库和框架中,可能还会有更多的鼠标相关事件和功能可供使用。例如,一些图形库可能提供鼠标绘图功能,而一些游戏引擎可能提供鼠标控制功能,当然这些不是我写这篇文章所要说的,就简单的从鼠标滑动验证开始,凡事必先利其器,方能有效地使用鼠标事件来进行交互。
但是有时候,我们有些用户会通过移动端(如手机、ipad等)用手触控的方式去访问PC网站的时候,鼠标事件就不起作用。所以要考虑到一些兼容的情况,那么就有了下面关于移动端的内容。
通过监听这些触摸事件,我们可以实现不同的交互效果和功能,比如通过滑动事件来实现轮播图、通过长按事件来实现弹出菜单,当然也可以来实现验证组件。同时,还可以通过事件对象获取触摸点的坐标信息,从而精确地处理触摸操作。好了,废话不多说,我们开始着眼于开发工作。
<div class="drag"> <div class="bg" /> <div class="text" @selectstart="sotp"> <img v-if="success" src="@/assets/icon/login_icon_successful.png" width="16px" /> {{ tips }} </div> <div class="btn" /> </div>并用CSS来布局和样式化
const oDarg = getDom('.drag'); const oBg = getDom('.bg'); const oText = getDom('.text'); const oBtn = getDom('.btn'); oBtn.style.left = 0; oBg.style.width = 0; oBg.style.transition = 'width 1s ease'; oBtn.style.transition = 'left 1s ease'; tips.value = '滑动验证'; success.value = false; oText.style.color = '#666666'; oText.style.background = '#E5E5E5';第二步:实现滑块拖动功能
//堆代码 duidaima.com // PC端事件 // 鼠标按下事件 oBtn.onmousedown = function (eve) { console.log('叮咚'); // const phone = _this.form.getFieldValue('phone') // const password = _this.form.getFieldValue('password') // if (!phone || !password) { // _this.$message.info(_this.$t('msg.telPsw')) // return false // } // this.isMouseUp = false oText.style.background = 'none'; oBg.style.transition = ''; oBtn.style.transition = ''; const e = eve || window.event; const downX = e.clientX; // eslint-disable-next-line no-unused-vars let successPan = false; // 判断验证是否成功 const distance = oDarg.offsetWidth - oBtn.offsetWidth; // 验证成功的距离 // 鼠标移动 document.onmousemove = function (eve) { console.log('onmousemove'); const e = eve || window.event; const moveX = e.clientX; let offsetX = moveX - downX; if (offsetX > distance) { offsetX = distance; } else if (offsetX < 0) { offsetX = 0; } oBtn.style.left = `${offsetX}px`; oBg.style.width = `${offsetX}px`; if (offsetX === distance) { // 判断验证通过 // _this.tips = _this.$t('login.verificationRes') tips.value = '验证成功'; success.value = true; // oBtn.innerHTML = '√' oText.style.color = '#FFF'; oBtn.style.color = '#4CAF50'; successPan = true; // 验证通过时的条件 siliding.value = successPan; console.log(siliding, 'this.siliding'); document.onmousemove = null; // 验证通过后 鼠标按下事件和鼠标移动都没用了 因此需要清除 oBtn.onmousedown = null; } }; // 鼠标抬起事件 document.onmouseup = function () { if (!successPan) { oBtn.style.left = 0; oBg.style.width = 0; oBg.style.transition = 'width 1s ease'; oBtn.style.transition = 'left 1s ease'; } document.onmousemove = null; oBtn.onmouseup = null; }; };其中,onmousemove和onmouseup这两个方法,已经在简述中,提过了它的触发条件,当然也得考虑到移动端访问的情况,
// 移动端事件 oBtn.ontouchstart = function (eve) { console.log('ontouchstart'); // const phone = _this.form.getFieldValue('phone') // const password = _this.form.getFieldValue('password') // if (!phone || !password) { // _this.$message.info(_this.$t('msg.telPsw')) // return false // } this.isMouseUp = false; oText.style.background = 'none'; oBg.style.transition = ''; oBtn.style.transition = ''; let e = eve || window.event; // 移动端特殊处理 e = 'ontouchstart' in document ? e.touches[0] : e; const downX = e.clientX; // eslint-disable-next-line no-unused-vars let successPan = false; // 判断验证是否成功 const distance = oDarg.offsetWidth - oBtn.offsetWidth; // 验证成功的距离 // 鼠标移动 // document => oBtn oBtn.ontouchmove = function (eve) { console.log('ontouchmove'); console.log(eve); let e = eve || window.event; // 移动端特殊处理 e = 'ontouchstart' in document ? e.touches[0] : e; console.log(e.clientX); const moveX = e.clientX; let offsetX = moveX - downX; if (offsetX > distance) { offsetX = distance; } else if (offsetX < 0) { offsetX = 0; } oBtn.style.left = `${offsetX}px`; oBg.style.width = `${offsetX}px`; if (offsetX === distance) { // 判断验证通过 // _this.tips = _this.$t('login.verificationRes') // _this.success = true tips.value = '验证成功'; success.value = true; // oBtn.innerHTML = '√' oText.style.color = '#FFF'; oBtn.style.color = '#4CAF50'; successPan = true; // 验证通过时的条件 siliding.value = successPan; console.log(siliding.value, 'this.siliding'); // document => oBtn oBtn.ontouchmove = null; // 验证通过后 鼠标按下事件和鼠标移动都没用了 因此需要清除 oBtn.ontouchstart = null; } };依此类推,在这里就不过的阐述
const distance = oDarg.offsetWidth - oBtn.offsetWidth; // 验证成功的距离我这里设置的阈值是,轨道总长度 - 按钮总长度。
第五步:提供可配置选项