本人自己在写代码的过程中，一直对e.offsetX 与 e.offsetY 分不清，今天好好探究一下e.offsetX 与 e.offsetY
e.offsetX 与 e.offsetY 下相对与事件源的距离，也就是距离e.target的距离， 大家看下面例子,给出几张截图。
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Document</title><style>ul {width: 300px;height: 200px;background: #f40;margin: 0;padding: 0;list-style: none;}li {height: 30px;border-bottom: 1px solid #ccc;list-style: none;}</style></head><body><!-- --><ul><li>1</li><li>2</li><li>3</li></ul><script>// e.offsetX -> 相对于e.target的距离let ul = document.getElementsByTagName('ul')[0]ul.onclick = (e) => {console.log(e.offsetX, e.offsetY)}</script></body>
</html>
因为这个的 事件源就是ul元素本身 ，点击事件就是在ul上面触发的。所以offsetX 和 offsetY是相对于ul的。
这个的offsetX 和 offsetY是相对于 2这个li！因为存在事件冒泡，点击事件是在2这个li上面触发的，e.target是2这个li，事件源是2这个li，e.offsetX 和 e.offsetY 就是相对于2这个li的距离
同理。这个的offsetX 和 offsetY是相对于 3这个li！因为存在事件冒泡，点击事件是在3这个li上面触发的，e.target是3这个li，事件源是3这个li，e.offsetX 和 e.offsetY 就是相对于3这个li的距离
