11、常用鼠标事件
![1551172699854](https://i-blog.csdnimg.cn/blog_migrate/d9bc28ef9f9e0ecb3e239b46dbe19d1a.png)
1. 案例:禁止选中文字和禁止右键菜单
![1551172755484](https://i-blog.csdnimg.cn/blog_migrate/bdef8e6a7cb18655af01784d281a3126.png)
<body>
我是一段不愿意分享的文字
<script>
document.addEventListener('contextmenu', function(e) {
e.preventDefault();
})
document.addEventListener('selectstart', function(e) {
e.preventDefault();
})
</script>
</body>
2. 鼠标事件对象
![1551173103741](https://i-blog.csdnimg.cn/blog_migrate/ff69f881ff7e23fe1a68b54428a09b09.png)
3. 获取鼠标在页面的坐标
<script>
document.addEventListener('click', function(e) {
console.log(e.clientX);
console.log(e.clientY);
console.log('---------------------');
console.log(e.pageX);
console.log(e.pageY);
console.log('---------------------');
console.log(e.screenX);
console.log(e.screenY);
})
</script>
4. 案例:跟随鼠标的天使
![1551173172613](https://i-blog.csdnimg.cn/blog_migrate/4a3f1e592ba19f38d3e56f2a63418871.png)
![1551173186812](https://i-blog.csdnimg.cn/blog_migrate/63a46696f90abbf0d6c476cfc282e2ca.png)
<body>
<img src="images/angel.gif" alt="">
<script>
var pic = document.querySelector('img');
document.addEventListener('mousemove', function(e) {
var x = e.pageX;
var y = e.pageY;
console.log('x坐标是' + x, 'y坐标是' + y);
pic.style.left = x - 50 + 'px';
pic.style.top = y - 40 + 'px';
});
</script>
</body>