JS原生点击事件用法介绍

一、click事件

1、click事件是JS原生提供的最基本的鼠标点击事件，即用户单击鼠标左键触发。它可以被添加在大多数HTML元素上，如按钮、链接、图像和表单元素等。


const btn = document.querySelector(".btn");
btn.addEventListener("click", function() {
  console.log("Button clicked");
});

2、click事件通常用于执行一些与用户交互相关的操作，如触发表单提交、打开链接或动态加载内容等。同时，click事件也可以通过JS来模拟触发，以实现自动化操作。


const btn = document.querySelector(".btn");
btn.click(); //模拟点击按钮

3、click事件还有两个相关的方法：preventDefault()和stopPropagation()。preventDefault()方法阻止默认行为，如表单提交或链接跳转；stopPropagation()方法停止事件传递，防止事件冒泡。


const link = document.querySelector(".link");
link.addEventListener("click", function(event) {
  event.preventDefault(); //阻止默认行为
  event.stopPropagation(); //停止事件传递
});

二、mousedown和mouseup事件

1、mousedown事件在用户按下鼠标键时触发，而mouseup事件则在用户释放鼠标键时触发。这两个事件和click事件结合使用，可以实现更复杂的用户交互效果。


const btn = document.querySelector(".btn");
btn.addEventListener("mousedown", function() {
  console.log("Button pressed");
});
btn.addEventListener("mouseup", function() {
  console.log("Button released");
});
btn.addEventListener("click", function() {
  console.log("Button clicked");
});

2、mousedown和mouseup事件还可以配合mousemove事件一起使用，实现拖拽和缩放等复杂的UI交互效果。


const box = document.querySelector(".box");
let isDragging = false;
let startX, startY;

box.addEventListener("mousedown", function(event) {
  isDragging = true;
  startX = event.clientX - box.offsetLeft;
  startY = event.clientY - box.offsetTop;
});

box.addEventListener("mouseup", function() {
  isDragging = false;
});

box.addEventListener("mousemove", function(event) {
  if (isDragging) {
    box.style.left = event.clientX - startX + "px";
    box.style.top = event.clientY - startY + "px";
  }
});

三、dblclick事件

1、dblclick事件在用户双击鼠标左键时触发，通常用于实现一些对用户行为高度敏感的操作，如创建新窗口、更改页面样式等。


const box = document.querySelector(".box");
box.addEventListener("dblclick", function() {
  console.log("Box double clicked");
});

2、dblclick事件同样也可以被模拟触发，以实现自动化操作。


const box = document.querySelector(".box");
box.dispatchEvent(new MouseEvent("dblclick")); //模拟双击事件

四、contextmenu事件

1、contextmenu事件在用户右击鼠标时触发，通常用于显示上下文菜单或自定义菜单。默认情况下，右键点击浏览器窗口会弹出浏览器默认菜单。


const menu = document.querySelector(".menu");
document.addEventListener("contextmenu", function(event) {
  event.preventDefault(); //阻止默认菜单
  menu.style.left = event.clientX + "px";
  menu.style.top = event.clientY + "px";
  menu.style.display = "block";
});

2、contextmenu事件也可以通过JS来触发，以实现自动化操作。


const menu = document.querySelector(".menu");
menu.dispatchEvent(new MouseEvent("contextmenu", { bubbles: true, cancelable: true, clientX: 100, clientY: 100 })); //模拟右键点击事件

五、touchstart、touchmove和touchend事件

1、touchstart事件在用户触摸屏幕时触发，而touchmove事件则在用户移动手指时触发，touchend事件则在用户将手指从屏幕上移开时触发。这三个事件可以用来识别用户手势，实现拖拽、切换、缩放等复杂的手势操作。


const box = document.querySelector(".box");
let isDragging = false;
let startX, startY;

box.addEventListener("touchstart", function(event) {
  isDragging = true;
  startX = event.touches[0].clientX - box.offsetLeft;
  startY = event.touches[0].clientY - box.offsetTop;
});

box.addEventListener("touchmove", function(event) {
  if (isDragging) {
    event.preventDefault(); //阻止页面滚动
    box.style.left = event.touches[0].clientX - startX + "px";
    box.style.top = event.touches[0].clientY - startY + "px";
  }
});

box.addEventListener("touchend", function() {
  isDragging = false;
});

2、除了touchstart、touchmove和touchend事件外，还有一些与移动设备相关的事件，如touchcancel、gesturestart、gesturechange和gestureend等。这些事件可以用来实现更复杂的手势操作，如双指旋转、双指缩放等。


const box = document.querySelector(".box");
let isRotating = false;
let lastAngle;

box.addEventListener("gesturestart", function(event) {
  isRotating = true;
  lastAngle = event.rotation;
});

box.addEventListener("gesturechange", function(event) {
  if (isRotating) {
    box.style.transform = "rotate(" + (lastAngle - event.rotation) + "deg)";
    lastAngle = event.rotation;
  }
});

box.addEventListener("gestureend", function() {
  isRotating = false;
});