zoukankan      html  css  js  c++  java
  • 常用鼠标事件

    常用鼠标事件

    1 、案例:禁止选中文字和禁止右键菜单

    <body>
       我是一段不愿意分享的文字
       <script>
           // 1. contextmenu 我们可以禁用右键菜单
           document.addEventListener('contextmenu', function(e) {
      // preventDefault 阻止默认行为
                   e.preventDefault();
          })
           // 2. 禁止选中文字 selectstart
           document.addEventListener('selectstart', function(e) {
               e.preventDefault();
          })
       </script>
    </body>

    2、 鼠标事件对象

    3、 获取鼠标在页面的坐标

        <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>

    4、 案例:跟随鼠标的天使

        <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>

     

    星辰ꦿ.大海
  • 相关阅读:
    jQuery获取各种标签的文本和value值
    python中base64编码与解码
    Django 的 slug url 正则匹配
    JavaScript base64 加密解密
    HTML引入外部JS文件
    CSS样式的引入方式
    Django 配置404页面
    selenium 基本操作
    python 启动pydoc查看文档
    selenium webdriver
  • 原文地址:https://www.cnblogs.com/xc-dh/p/13709453.html
Copyright © 2011-2022 走看看