想秀一手用原生JS封装拖动验证滑块？

前端

2023-09-16 23:00:45

前言

近年来，随着互联网的飞速发展，网站安全问题也日益凸显。为了防止恶意程序和机器人程序的攻击，许多网站都采用了各种各样的验证方式，其中拖动验证滑块就是一种常用的方式。

拖动验证滑块是一种交互式验证方式，它要求用户将一个滑块拖动到指定的位置才能通过验证。这种方式既简单易用，又能够有效地防止恶意程序和机器人程序的攻击。

原生JS封装拖动验证滑块

接下来，我们就一起来看看如何使用原生JS封装一个拖动验证滑块组件。

1. HTML结构

首先，我们需要创建一个HTML结构来放置拖动验证滑块组件。HTML结构如下：

<div id="drag-slider">
  <div class="drag-slider-track"></div>
  <div class="drag-slider-handle"></div>
</div>

其中，<div id="drag-slider">是拖动验证滑块组件的父容器，<div class="drag-slider-track">是滑块轨道的容器，<div class="drag-slider-handle">是滑块的把手。

2. CSS样式

接下来，我们需要为拖动验证滑块组件添加CSS样式。CSS样式如下：

#drag-slider {
  width: 300px;
  height: 100px;
  border: 1px solid #ccc;
  background-color: #f5f5f5;
}

.drag-slider-track {
  width: 100%;
  height: 100%;
}

.drag-slider-handle {
  width: 20px;
  height: 20px;
  background-color: #333;
  border-radius: 50%;
}

其中，#drag-slider是拖动验证滑块组件的父容器，.drag-slider-track是滑块轨道的容器，.drag-slider-handle是滑块的把手。

3. JavaScript代码

接下来，我们需要编写JavaScript代码来实现拖动验证滑块组件的功能。JavaScript代码如下：

// 创建拖动验证滑块组件
function DragSlider(element) {
  this.element = element;
  this.track = this.element.querySelector('.drag-slider-track');
  this.handle = this.element.querySelector('.drag-slider-handle');

  // 绑定事件监听器
  this.handle.addEventListener('mousedown', this.onMouseDown.bind(this));
  this.handle.addEventListener('touchstart', this.onTouchStart.bind(this));
}

// 鼠标按下事件处理函数
DragSlider.prototype.onMouseDown = function(event) {
  event.preventDefault();

  // 计算滑块把手相对于滑块轨道的偏移量
  this.offsetX = event.clientX - this.handle.getBoundingClientRect().left;
  this.offsetY = event.clientY - this.handle.getBoundingClientRect().top;

  // 绑定鼠标移动事件监听器
  document.addEventListener('mousemove', this.onMouseMove.bind(this));
  document.addEventListener('mouseup', this.onMouseUp.bind(this));
};

// 鼠标移动事件处理函数
DragSlider.prototype.onMouseMove = function(event) {
  event.preventDefault();

  // 计算滑块把手的位置
  var left = event.clientX - this.offsetX;
  var top = event.clientY - this.offsetY;

  // 限制滑块把手的位置
  if (left < 0) {
    left = 0;
  } else if (left > this.track.offsetWidth - this.handle.offsetWidth) {
    left = this.track.offsetWidth - this.handle.offsetWidth;
  }

  if (top < 0) {
    top = 0;
  } else if (top > this.track.offsetHeight - this.handle.offsetHeight) {
    top = this.track.offsetHeight - this.handle.offsetHeight;
  }

  // 设置滑块把手的位置
  this.handle.style.left = left + 'px';
  this.handle.style.top = top + 'px';
};

// 鼠标抬起事件处理函数
DragSlider.prototype.onMouseUp = function(event) {
  event.preventDefault();

  // 解绑鼠标移动事件监听器
  document.removeEventListener('mousemove', this.onMouseMove);
  document.removeEventListener('mouseup', this.onMouseUp);

  // 判断是否通过验证
  if (left >= this.track.offsetWidth - this.handle.offsetWidth) {
    alert('验证成功！');
  } else {
    alert('验证失败！');
  }
};

// 触摸开始事件处理函数
DragSlider.prototype.onTouchStart = function(event) {
  event.preventDefault();

  // 计算滑块把手相对于滑块轨道的偏移量
  this.offsetX = event.touches[0].clientX - this.handle.getBoundingClientRect().left;
  this.offsetY = event.touches[0].clientY - this.handle.getBoundingClientRect().top;

  // 绑定触摸移动事件监听器
  document.addEventListener('touchmove', this.onTouchMove.bind(this));
  document.addEventListener('touchend', this.onTouchEnd.bind(this));
};

// 触摸移动事件处理函数
DragSlider.prototype.onTouchMove = function(event) {
  event.preventDefault();

  // 计算滑块把手的位置
  var left = event.touches[0].clientX - this.offsetX;
  var top = event.touches[0].clientY - this.offsetY;

  // 限制滑块把手的位置
  if (left < 0) {
    left = 0;
  } else if (left > this.track.offsetWidth - this.handle.offsetWidth) {
    left = this.track.offsetWidth - this.handle.offsetWidth;
  }

  if (top < 0) {
    top = 0;
  } else if (top > this.track.offsetHeight - this.handle.offsetHeight) {
    top = this.track.offsetHeight - this.handle.offsetHeight;
  }

  // 设置滑块把手的位置
  this.handle.style.left = left + 'px';
  this.handle.style.top = top + 'px';
};

// 触摸结束事件处理函数
DragSlider.prototype.onTouchEnd = function(event) {
  event.preventDefault();

  // 解绑触摸移动事件监听器
  document.removeEventListener('touchmove', this.onTouchMove);
  document.removeEventListener('touchend', this.onTouchEnd);

  // 判断是否通过验证
  if (left >= this.track.offsetWidth - this.handle.offsetWidth) {
    alert('验证成功！');
  } else {
    alert('验证失败！');
  }
};

// 初始化拖动验证滑块组件
var dragSlider = new DragSlider(document.getElementById('drag-slider'));

其中，DragSlider函数是拖动验证滑块组件的构造函数，onMouseDown、onMouseMove、onMouseUp、onTouchStart、onTouchMove、onTouchEnd分别是鼠标按下事件处理函数、鼠标移动事件处理函数、鼠标抬起事件处理函数、触摸开始事件处理函数、触摸移动事件处理函数、触摸结束事件处理函数。