1. 检测元素之外的点击

在实现隐藏弹窗或收起下拉框时，如果你还在一层层判断是否点击了某个元素之外的区域，赶紧试试使用 contains 方法来实现。

document.addEventListener('click', function (evt) {
    // isClickedOutside 为 true 如果点击的元素在 ele 之外
    const isClickedOutside = !ele.contains(evt.target);
});

2. 一次性的事件监听

除了在监听的事件函数中移除当前的监听外，也可以使用 once 参数。

const handler = function (e) {};
ele.addEventListener('event-name', handler, { once: true });

3. 打开新页签

看似平平无奇的打开页签，但是需要关注下 rel，如果要打开外链，建议设置为 noopener noreferrer，避免一些恶意网站通过 window.opener.location 重定向你的网站地址。window.open 方法同理。

// 高版本浏览器 rel 默认为 noopener，不过建议显性设置，兼容低版本。
<a target="_blank" rel="noopener noreferrer">...</a>

// window.open rel 默认为 opener，需要自己设置
window.open('https://baidu.com', 'baidu', 'noopener,noreferrer')

以下有安全漏洞，打开的新页签可以通过 window.opener.location 重定向你的网站

<a target="_blank" rel="opener">...</a>

window.opener.location = 'http://fake.website.here';

4. 滚动条样式

自定义滚动条样式也是很常见的需求，除了通过样式，也可以通过第三方库（如 better-scroll 等）来实现自定义滚动条样式。

/*定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸*/
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

/*定义滚动条轨道 内阴影+圆角*/
::-webkit-scrollbar-track {
  border-radius: 10px;
  background-color: #fafafa;
}

/*定义滑块 内阴影+圆角*/
::-webkit-scrollbar-thumb {
  border-radius: 10px;
  background: rgb(191, 191, 191);
}

/*较新的 API*/
body {
  scrollbar-width: thin;
  scrollbar-color: #718096 #edf2f7;
}

5. 打开 Modal 时禁止 body 滚动

打开弹窗的时候，会发现背后的内容还是可以滚动，我们需要在弹窗出现时禁用滚动，在弹窗消失时恢复。

// 打开 Modal 时，禁止 body 滚动
document.body.style.overflow = 'hidden';

// 恢复滚动
document.body.style.removeProperty('overflow');

Q.E.D.