条件(点击)动作角度 - TypeScript

在 TypeScript 中，我们可以使用条件语句来执行基于某些条件执行不同的代码块。特别是，当用户在网页上进行点击时，我们可以使用条件语句来指定在不同的点击条件下执行不同的操作。

示例

以下是一些 TypeScript 代码片段，展示如何使用条件(点击)动作角度来处理用户点击事件。

点击操作

const button = document.getElementById('myButton');

button.addEventListener('click', () => {
  // 此处为点击时执行的操作
});

条件 - 单一点击

const button = document.getElementById('myButton');
let clicked = false;

button.addEventListener('click', () => {
  if (!clicked) {
    // 此处为首次点击时执行的操作
    clicked = true;
  } else {
    // 此处为再次点击时执行的操作
  }
});

条件 - 多次点击

const button = document.getElementById('myButton');
let clickCount = 0;

button.addEventListener('click', () => {
  clickCount++;

  if (clickCount === 1) {
    // 此处为第一次点击时执行的操作
  } else if (clickCount === 2) {
    // 此处为第二次点击时执行的操作
  } else {
    // 此处为第三次及以上点击时执行的操作
  }
});

条件 - 点击位置

const button = document.getElementById('myButton');
const body = document.getElementsByTagName('body')[0];

body.addEventListener('click', (event: MouseEvent) => {
  const target = event.target;

  if (target === button) {
    // 此处为在按钮上点击时执行的操作
  } else {
    // 此处为在别的元素上点击时执行的操作
  }
});

参考资料

TypeScript Handbook: Control Flow Statements