一起养成写作习惯！这是我参与「掘金日新计划 · 4 月更文挑战」的第2天，点击查看活动详情。
阻止冒泡、默认事件
-
event.stopPropagation():
阻止事件的冒泡的方法，不让事件向documen上蔓延，但是默认事件任然会执行，当你掉用这个方法的时候，如果点击一个连接，这个连接仍然会被打开， -
event.preventDefault():
阻止默认事件的方法，调用此方法是，连接不会被打开，但是会发生冒泡，冒泡会传递到上一层的父元素； -
return false;: 这个方法比较暴力，他会
同时阻止事件冒泡也会阻止默认事件；写上此代码，连接不会被打开，事件也不会传递到上一层的父元素；可以理解为return false就等于同时调用了event.stopPropagation()和event.preventDefault()
event详细解析
event.client、event.screen与event.offset
screen: 是相对于屏幕而言的client: 则是相对于文档而言的pageX,pageY: 如果有滚动条的时候，是client的长度+滚动条滚动的距离，如如果页面向右滚动 200px 并出现了滚动条，这部分在窗口之外，然后鼠标点击距离窗口左边 100px 的位置，pageX 所返回的值将是 300。offset: 则是相对于父容器而言的。
如果页面上有滚动条的话，
总结
-
offsetTop,offsetLeft：只读属性。要确定的这两个属性的值，首先得确定元素的offsetParent。offsetParent指的是距该元素最近的position不为static的祖先元素，如果没有则指向body元素。确定了offsetParent，offsetLeft指的是元素左侧偏移offsetParent的距离，同理offsetTop指的是上侧偏移的距离。 -
offsetHeight,offsetWidth：只读属性。这两个属性返回的是元素的高度或宽度，包括元素的边框、内边距和滚动条。返回值是一个经过四舍五入的整数。 -
scrollHeight,scrollWidth：只读属性。返回元素内容的整体尺寸，包括元素看不见的部分（需要滚动才能看见的）。返回值包括padding，但不包括margin和border。 -
scrollTop,scrollLeft：图中已经表示的很明白了。如果元素不能被滚动，则为0。 -
window.innerWidth,window.innerHeight：只读。视口（viewport）的尺寸，包含滚动条 -
clientHeight,clientWidth：包括padding，但不包括border, margin和滚动条。 -
Element.getBoundingClientRect()：只读，返回浮点值。这个方法非常有用，常用于确定元素相对于视口的位置。该方法会返回一个[DOMRect]对象，包含left, top, width, height, bottom, right六个属性：left, right, top, bottom：都是元素（不包括margin）相对于视口的原点（视口的上边界和左边界）的距离。height, width：元素的整体尺寸，包括被滚动隐藏的部分；padding和border参与计算。另外，heigth=bottom-top, width=right-left。
