增强用户体验的5个实用JavaScript方法

处理元素外的点击

在开发Web应用时，有时需要在用户点击指定元素外的任何地方时执行某些操作。该代码提供了一种解决方案，使用JavaScript监听点击事件，并在用户点击指定元素外的任何地方时调用回调函数。

const onClickOutside = (elementId, callback) => {
  const element = document.getElementById(elementId);

  document.addEventListener("click", (e) => {
    if (!element.contains(e.target)) callback();
  });
};

onClickOutside("red-box", () => console.log("Clicked outside red box"));

document.addEventListener("DOMContentLoaded", onClickOutside);

将元素平滑滚动到视图中

此功能为网页上的元素提供了流畅的滚动效果。当使用目标元素的选择器调用此函数时，该元素将顺利滚动到视图中。

const smoothScroll = element =>
  document.querySelector(element).scrollIntoView({
    behavior: 'smooth'
  });

smoothScroll('#fooBar'); // 使用id fooBar平滑滚动到元素

检查当前用户的首选语言

该功能通过检查用户网页浏览器中可用的语言信息，为国际化目的提供了一种检测用户首选语言的简单方法。

const detectLanguage = (defaultLang = 'en-US') =>
  navigator.language ||
  (Array.isArray(navigator.languages) && navigator.languages[0]) ||
  defaultLang;

detectLanguage(); // 'nl-NL'

检查用户的首选配色方案

此功能提供了一种方法来确定用户的设备或浏览器是否喜欢深色配色方案，并可用于相应地调整网站的样式。

const prefersDarkColorScheme = () =>
  window &&
  window.matchMedia &&
  window.matchMedia('(prefers-color-scheme: dark)').matches;

prefersDarkColorScheme(); // true

检查设备是否支持触摸事件

此功能提供了一种方法来确定用户的设备是否支持触摸事件，并可用于在触摸设备上提供不同的用户体验。

const supportsTouchEvents = () =>
  window && 'ontouchstart' in window;

supportsTouchEvents(); // true