JS原生事件目标对比：判断目标是否为<body>的方法选择

嘿，这个问题问得相当务实！咱们来拆解下这两种判断方式的优劣，帮你选最靠谱的方案：

这种方法是最精准、最安全的选择，原因有这几点：

• 完全无歧义的匹配：document.body是当前页面唯一根<body>元素的直接引用，用全等运算符===对比，能100%确认你拿到的就是页面最外层的那个body，不会有任何误判的可能——毕竟一个页面里不可能存在第二个document.body对象。
• 规避大小写陷阱：tagName返回的标签名是大写字符串（比如'BODY'），如果不小心写成小写'body'去对比，直接就会返回false，排查这类小bug还挺浪费时间的。而全等对比完全没这个顾虑。
• 排除非目标元素的干扰：比如遇到iframe里的<body>、shadow DOM中的<body>（虽然规范不允许，但实际开发中偶尔会有奇奇怪怪的场景），它们的tagName也是'BODY'，但和主页面的document.body不是同一个对象，这时候用tagName对比就会误判，全等法则能精准区分。

除非你有特殊需求（比如要匹配所有标签名为BODY的元素，这种场景极少），否则不建议用这种方式，主要坑点：

• 大小写容错率低：虽然主流浏览器都返回大写的标签名，但万一遇到特殊环境（比如某些老旧浏览器或自定义渲染环境）返回小写，或者自己手滑写成'body'，直接就会出错。就算改成event.target.tagName.toLowerCase() === 'body'，也多了一步转换，不如全等式简洁可靠。
• 存在误判风险：如前面所说，非主页面根body的元素也可能拥有BODY标签名，这时候用标签名对比会把它们当成目标元素，不符合你“判断是否为标签”的核心需求。

总结一下：如果你的需求是确认事件目标就是当前页面的根<body>，event.target === document.body是不二之选；只有在极特殊的场景下，才考虑用标签名对比，且一定要处理好大小写问题。

内容的提问来源于stack exchange，提问作者Sahil Jain