常用的鼠标事件
禁止文字选中、复制
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
我是一段不愿意分享的文字
</body>
<script>
document.addEventListener('contextmenu', function(e) {
e.preventDefault();
})
// 2.禁止选择文字
document.addEventListener('selectstart', function(e) {
e.preventDefault();
})
</script>
</html>
鼠标事件对象
event对象代表事件的状态，跟时间相关的一系列信息的集合。现阶段我们主要使用MouseEvent和键盘事件对象KeyboardEvent。
| 鼠标事件对象 | 说明 |
|---|---|
| e.clientX | 返回相对于浏览器窗口可视区的X坐标 |
| e.clientY | 返回相对于浏览器窗口可视区的Y坐标 |
| e.pageX | 返回鼠标相对于文档页面的X坐标——IE9+支持 |
| e.pageY | 返回鼠标相对于文档页面的Y坐标——IE9+支持 |
| e.screenX | 返回鼠标相对于电脑屏幕的X坐标 |
| e.screenY | 返回鼠标相对于电脑屏幕的Y坐标 |
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
</body>
<script>
document.body.style.height = '1200px';
document.body.style.width = '1200px';
document.addEventListener('click', function(e) {
console.log('鼠标在可视窗口的坐标是：(' + e.clientX + ',' + e.clientY + ')\n' +
'鼠标在页面文档的坐标是：(' + e.pageX + ',' + e.pageY + ')\n' +
'鼠标在电脑屏幕的坐标是：(' + e.screenX + ',' + e.screenY + ')')
})
</script>
</html>