<body>
我是一段不願意分享的文字
<script>
// 1. contextmenu 我們可以禁用右鍵菜單
document.addEventListener('contextmenu', function(e) {
e.preventDefault();
})
// 2. 禁止選中文字 selectstart
document.addEventListener('selectstart', function(e) {
e.preventDefault();
})
</script>
</body>
3. 鼠標事件對象
4. 獲取鼠標在頁面的坐標
<script>
// 鼠標事件對象 MouseEvent
document.addEventListener('click', function(e) {
// 1. client 鼠標在可視區的x和y坐標
console.log(e.clientX);
console.log(e.clientY);
console.log('---------------------');
// 2. page 鼠標在頁面文檔的x和y坐標
console.log(e.pageX);
console.log(e.pageY);
console.log('---------------------');
// 3. screen 鼠標在電腦屏幕的x和y坐標
console.log(e.screenX);
console.log(e.screenY);
})
</script>
5. 案例：跟隨鼠標的天使
<img src="images/angel.gif" alt="">
<script>
var pic = document.querySelector('img');
document.addEventListener('mousemove', function(e) {
// 1. mousemove只要我們鼠標移動1px 就會觸發這個事件
// 2.核心原理： 每次鼠標移動，我們都會獲得最新的鼠標坐標，
// 把這個x和y坐標做為圖片的top和left 值就可以移動圖片
var x = e.pageX;
var y = e.pageY;
console.log('x坐標是' + x, 'y坐標是' + y);
//3 . 千萬不要忘記給left 和top 添加px 單位
pic.style.left = x - 50 + 'px';
pic.style.top = y - 40 + 'px';
});
</script>