經常使用鼠標事件

時間 2020-09-22

標籤經常使用鼠標事件简体版

原文原文鏈接

經常使用鼠標事件

1 、案例：禁止選中文字和禁止右鍵菜單

<body>
    我是一段不肯意分享的文字
    <script>
        // 1. contextmenu 咱們能夠禁用右鍵菜單
        document.addEventListener('contextmenu', function(e) {
    // preventDefault 阻止默認行爲
                e.preventDefault();
       })
        // 2. 禁止選中文字 selectstart
        document.addEventListener('selectstart', function(e) {
            e.preventDefault();
       })
    </script>
</body>

二、鼠標事件對象

三、獲取鼠標在頁面的座標

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

四、案例：跟隨鼠標的天使

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