有做过拖拽项目的前端小伙伴一定有遇到过这几个鼠标事件属性：clientX、clientY、pageX、pageY、screenX、screenY、offsetX、offsetY，WTF！一开始SEO禅看到这么多XY也是一头雾水头大的很，读了MDN的文档还是不是很清楚，后面看了几篇文章，又找到一些图片，终于再也不会把他们混在一起了，在这里记录分享给大家：
clientX/Y：当前鼠标点击位置相对于浏览器窗口左上角的X/Y值，不会随着文档滚动而变化
pageX/Y：当前鼠标点击位置相对于文档左上角的X/Y值，如果DOM文档，也就是页面滚动，这个值会变化
screenX/Y：当前鼠标点击位置相对于屏幕浏览器左上角的X/Y值，不会随着浏览器窗口变化或文档滚动而变化
offsetX/Y：当前鼠标点击位置相对于当前被点击DOM对象节点左上角X/Y值，这里注意是padding内边距的左上角
转自：https://www.seozen.top/javascript-clientx_y-pagex_y-screenx_y-offsetx_y.html
var href = '' // 下载链接
var a = document.createElement('a');
a.setAttribute('href', href);
a.setAttribute('target', '_blank');
a.setAttribute('id', 'startTelMedicine');
// 防止反复添加
if(document.getElementById('startTelMedicine')) {
document.body.removeChild(document.getElementById('startTelMedicine'));
}
document.body.appendChild(a);
a.click();
都是鼠标落上去的时候触发的。
onmousemove是javascript里面的，他可以触发js命令，但是hover做不到，hover只是css样式的类，只能定义样式。
比如说鼠标落上去实现一个弹出窗口的操作，就要用onmousemove，用hover的css定义是没办法的。除非在css里面再调用js，那就麻烦了。
hover包括了鼠标移到对象上，同时鼠标再移出对象的过程，相应的子类也被选中。
mouseover是鼠标经过对象时，不包含他的子类同时被选中。
主要区别在于 hover元素的子类上也有添加了事件驱动。而mouseover 只对当前元素添加事件驱动。
且 hover 事件包含mouseover 事件
mousemove(fn);
在每一个匹配元素的mousemove事件中绑定一个处理函数。
hover(over, out);
一个模仿悬停事件（鼠标移动到一个对象上面及移出这个对象）的方法。这是一个自定义的方法，它为频繁使用的任务提供了一种“保持在其中”的状态。
当鼠标移动到一个匹配的元素上面时，会触发指定的第一个函数。当鼠标移出这个元素时，会触发指定的第二个函数。而且，会伴随着对鼠标是否仍然处在特定元素中的检测（对子类的检测），如果是，则会继续保持“悬停”状态，而不触发移出事件（mouseout）。
public class Puppy{
int puppyAge;
public Puppy(age){
puppyAge = age;
}
public void say() {
System.out.println("汪汪汪");
}
}
var child = document.getElementById("child");// 获取子元素
var parent = document.createElement('parent');// 新建父元素
parent.className = 'parent';
child.parentNode.replaceChild(parent,child);// 获取子元素原来的父元素并将新父元素代替子元素
parent.appendChild(child);// 在新父元素下添加原来的子元素1 . 跳转链接 在当前窗口打开
window.location.href="http://www.baidu.com"
1
等价于
<a href="baidu.com" target="_self">go baidu</a>
1
2、跳转链接 在新窗口打开
window.open("http://www.baidu.com")
1
等价于
<a href="baidu.com" target="_blank">go baidu</a>
1
3、跳转链接 返回上一页
window.history.back(-1);
1
4、跳转链接
self.location.href="baidu.com"
————————————————
版权声明：本文为CSDN博主「杨林伟」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/qq_20042935/article/details/91040826
懒加载如今在网站中经常看到，当用户打开一个网页的时候，图片资源并不是马上加载的，当用户浏览到图片的文章，再去加载图片，能够提升整个网站的访问速度和用户体验，特别是网站的图片比较多的站点。
通过 lazysizes.js 插件就能很好解决这个问题，它可以实现图片的延迟加载，也就是说，当网页很长时，只价值用户视窗内的图片，而视窗外的图片会等到你拖动滚动条至后面才加载。这样就有效避免了图片过度网站加载慢的问题了，下面将介绍如何使用 lazysizes.js。
< script src="lazysizes.min.js" async=""></ script >使用是十分简单的，并且不需要加入 jQuery 库。
Step 1: 下载 lazysizes.min.js 插件并将其引入到你的网站上：
<script src="lazysizes.min.js" async=""></script>Step 2: 将 class="lazyload" 添加要延迟加载的 <images> 或 <iframes> 即可。
<!— 默认方案 –><img data-src="image.jpg" class="lazyload" />lazysizes不需要任何JS配置，只需要在img标签中添加class="lazyload"就可以了，目前lazysizes支持四种懒加载方式，如下。