<commit_before>---
layout: post
title: event的属性大全
category: HTML-CSS
keywords: 前端
---


1.event.clientX,clientY  //相对于浏览器可视窗口左上角 的鼠标坐标

事件发生的时候，鼠标相对于浏览器窗口可视文档区域的左上角的位置；(在DOM标准中，这两个属性值都不考虑文档的滚动情况，也就是说，无论文档滚动到哪里，只要事件发生在窗口左上角，clientX和clientY都是 0，所以在IE中，要想得到事件发生的坐标相对于文档开头的位置，要加上document.body.scrollLeft和 document.body.scrollTop)

2.event.pageX,pageY  //相对于父元素，鼠标的坐标

检索相对于父要素鼠标水平坐标的整数；

3.screenX、screenY  //相对于显示器左上角的鼠标坐标

鼠标指针相对于显示器左上角的位置，如果你想打开新的窗口，这两个属性很重要；

4、offsetX,offsetY/layerX,layerY  //相对于源元素左上角 的鼠标坐标

事件发生的时候，鼠标相对于源元素左上角的位置；


亲测：前三个是一样的在chrome下，都是距离浏览器左上角的坐标，offsetX是相对自己的坐标。<commit_msg>Update 2018-07-15-event的属性大全.md<commit_after>---
layout: post
title: event的属性大全
category: HTML-CSS
keywords: 前端
---


pageX，pageY：点击位置相对于html元素的坐标，单位为像素（加上滚动距离的，没有滚动时与clientX相同）

clientX，clientY：点击位置相对于视口（viewport）的坐标，单位为像素（不包含滚动条）

screenX，screenY：点击位置相对于显示屏幕的坐标，单位为设备硬件的像素

scrollHeight，scrollWidth：没有滚动条时，元素内容的高度/宽度

scrollLeft，scrollTop:被隐藏在内容区域左侧/上方的像素数。通过设置这个可以改变元素的滚动位置
{'fraction_non_alphanumeric': 0.10564102564102563, 'fraction_numerical': 0.013333333333333334, 'mean_word_length': 8.663366336633663, 'pattern_counts': {'":': 0, '<': 3, '<?xml version=': 0, '>': 3, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '3515048', 'n_tokens_mistral': 665, 'n_tokens_neox': 788, 'n_words': 40}