事件（UI事件、鼠标事件）

最新推荐文章于 2024-05-10 10:34:16 发布

章鱼Cc_yoo

最新推荐文章于 2024-05-10 10:34:16 发布

阅读量102

点赞数

文章标签： ui javascript html

本文链接：https://blog.csdn.net/cc200171/article/details/124868296

版权

1.UI事件

（1）load当页面完全加载后在window上触发图片也可以触发load事件

（2）resize 当窗口大小发生变化时在window上触发

（3）scroll 当用户滚动带滚动条的元素中的内容时，在该元素上面触发

案例

<!DOCTYPE html>
<html lang="en">
<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>
    <style>
        .hj{
            width: 60px;
            height: 80px;
            background-color: aqua;
            position: fixed;
            bottom: 50px;
            right: 20px;
            display: none;
        }
        .move{
            width: 200px;
            height: 5000px;
            background-color: pink;
        }
    </style>
</head>
<body>
    <div class="move"></div>
    <div class="hj"></div>
</body>
<script>
    var hj = document.querySelector('.hj');

    window.onscroll = function(e) {
        if(document.documentElement.scrollTop > 200) {
            hj.style.display = 'block';
        } else {
            hj.style.display = 'none';
        }
    }
    hj.onclick = function() {
       move();
    }
    timer = null;
    function move() {
        clearInterval(timer);
        var t = 20;
        var s = document.documentElement.scrollTop;
        var v = s/t;
        var count = 0;
        timer = setInterval(function () {
            count ++;
            s -= v;
            if (t === count) {
                clearInterval(timer);
                s = 0;
            }
            document.documentElement.scrollTop = s;
        }, 30)
    }
</script>
</html>

2.鼠标事件

（1）事件类型

onclick 单机

ondbclick 双击

oncentextmenu 右键菜单

onmouseover 移入

onmouseout 移出

onmouseenter 移入

onmouseleave 移出

注：建议使用enter和leave，因为over和out在鼠标移入移出子级时会发生触发

onmousedown 按下

onmouseup 抬起

onmousemove 移动

（2）坐标位置

screenX 在屏幕中的x坐标

screenY 在屏幕中的y坐标

相对于body

clientX 表示在事件发生时鼠标指针在视口中的水平坐标（不包含滚动距离）

clientY 在视口中的垂直坐标

获取点击目标的坐标（有兼容性）

offsetX

offsetY

案例

<!DOCTYPE html>
<html lang="en">
<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>拖拽</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .wrap{
            width: 100px;
            height: 100px;
            background-image: url(../img/1.jpg);
            background-size: cover;
            background-position: center center;
            position: absolute;
        }
    </style>
</head>
<body>
    <div class="wrap"></div>
</body>
<script>
    var dwrap = document.querySelector('.wrap');
    // 鼠标按下事件，获取起点位置信息
    dwrap.onmousedown = function(e1) {
        var x1 = e1.clientX;
        var y1 = e1.clientY;
        var l1 = this.offsetLeft;
        var t1 = this.offsetTop;
     

        // 鼠标移动事件，计算差值，dwrap重新定位
        window.onmousemove = function(e2) {
            var x2 = e2.clientX;
            var y2 = e2.clientY;
            var l2 = l1 + (x2 - x1);
            var t2 = t1 + (y2 - y1);
            // 边界处理
            l2 = l2 < 0 ? 0 : (l2 > window.innerWidth - dwrap.offsetWidth ? window.innerWidth - dwrap.offsetWidth : l2);
            t2 = t2 < 0 ? 0 : (t2 > window.innerHeight - dwrap.offsetHeight ? window.innerHeight - dwrap.offsetHeight : t2);
            dwrap.style.left = l2 + 'px';
            dwrap.style.top = t2 + 'px';
            console.log(1)
        }
    }
    // 当鼠标抬起时，去掉onmousemove事件
    dwrap.onmouseup = function() {
        window.onmousemove = null;
    }
</script>
</html>

章鱼Cc_yoo

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
事件（UI事件、鼠标事件）

1.UI事件（1）load当页面完全加载后在window上触发图片也可以触发load事件（2）resize 当窗口大小发生变化时在window上触发（3）scroll 当用户滚动带滚动条的元素中的内容时，在该元素上面触发案例<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible"
复制链接

扫一扫