JS 单击双击事件|极客笔记

JS 单击双击事件

在前端开发中，事件处理是非常重要的一部分。常见的事件有点击、双击、鼠标移入移出等。本文将重点介绍 JS 中的单击和双击事件。

单击事件

单击事件是最常见的事件之一，也是用户与页面互动的基本方式之一。当用户单击页面上的一个元素时，就会触发单击事件。

事件绑定

在 JS 中，可以通过给元素绑定单击事件来实现单击事件的触发。常用的方法有 addEventListener 和直接在 HTML 元素上绑定事件。

<button id="btn">Click me</button>

<script>
  // 使用 addEventListener 方法绑定单击事件
  const btn = document.getElementById('btn');
  btn.addEventListener('click', function() {
    alert('Button clicked!');
  });

  // 直接在 HTML 元素上绑定事件
  // <button id="btn" onclick="alert('Button clicked!')">Click me</button>
</script>

在上面的示例中，当用户单击按钮时，会弹出一个提示框显示 “Button clicked!”。

事件对象

在单击事件中，可以通过事件对象来获取触发事件的相关信息，比如鼠标位置、触发事件的元素等。

<button id="btn">Click me</button>

<script>
  const btn = document.getElementById('btn');
  btn.addEventListener('click', function(event) {
    console.log(event.target); // 输出触发事件的元素
    console.log(event.clientX, event.clientY); // 输出鼠标点击位置
  });
</script>

在上面的示例中，通过事件对象 event 可以获取触发事件的元素和鼠标点击位置。

双击事件

双击事件与单击事件类似，不同的是需要用户快速的点击两次触发。在 JS 中，可以通过给元素绑定双击事件来实现双击事件的触发。

事件绑定

与单击事件类似，双击事件也可以使用 addEventListener 方法或直接在 HTML 元素上绑定。

<button id="btn">Double click me</button>

<script>
  const btn = document.getElementById('btn');
  btn.addEventListener('dblclick', function() {
    alert('Button double clicked!');
  });

  // <button id="btn" ondblclick="alert('Button double clicked!')">Double click me</button>
</script>

在上面的示例中，当用户双击按钮时，会弹出一个提示框显示 “Button double clicked!”。

阻止双击选中文本

在页面中双击一个元素时，默认会选中文本内容。如果不希望文本被选中，可以在双击事件中阻止默认行为。

<div id="box">Double click me to prevent text selection</div>

<script>
  const box = document.getElementById('box');
  box.addEventListener('dblclick', function(event) {
    event.preventDefault();
  });
</script>

在上面的示例中，双击 div 元素时，不会选中文本。

区分单击和双击事件

有时候需要根据用户是单击还是双击来执行不同的操作，可以使用定时器来区分单击和双击事件。

<button id="btn">Click or double click me</button>

<script>
  const btn = document.getElementById('btn');

  let timer;
  btn.addEventListener('click', function(event) {
    clearTimeout(timer);
    timer = setTimeout(function() {
      console.log('Single click');
    }, 300);
  });

  btn.addEventListener('dblclick', function(event) {
    clearTimeout(timer);
    console.log('Double click');
  });
</script>

在上面的示例中，通过设置一个定时器，在用户点击按钮后 300 毫秒内再次点击按钮，则判断为双击事件；否则为单击事件。