当前位置:首页 > html > 正文内容

鼠标事件:onclick、onmousedown、onmouseup、onmouseover、onmouseout、onmouseenter、onmouseleave、鼠标的按键、 div简单拖拽

关中浪子2年前 (2022-04-25)html1403
【腾讯云】2核2G4M云服务器新老同享99元/年,续费同价

鼠标事件:
    onclick:在鼠标左健点击弹起之后触发的事件,即一次完整的鼠标点击过程。过程完成瞬间触发函数。
    onmousedown:事件会在鼠标按键被按下时发生。
    onmouseup:事件会在松开鼠标按键时触发。

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
 
</body>
<script type="text/javascript">
    /*
    鼠标事件:
        onclick:在鼠标左健点击弹起之后触发的事件,即一次完整的鼠标点击过程。过程完成瞬间触发函数;
        onmousedown:事件会在鼠标按键被按下时发生。
        onmouseup:事件会在松开鼠标按键时触发。
     */
    document.onclick = function () {
        console.log('click');
    };
    document.onmousedown = function () {
        console.log('mousedown');
    };
    document.onmouseup = function () {
        console.log('mousemove');
    }
</script>
</html>

onmouseover:属性在鼠标指针移动到元素上时触发。

onmouseout: 属性在鼠标指针移动到元素外时触发。

onmouseenter:属性在鼠标指针移动到元素上时触发,

              onmouseover和onmouseenter唯一的区别是 onmouseenter 事件不支持冒泡 。

onmouseleave:属性在鼠标指针移动到元素外时触发,

              onmouseout和onmouseleave唯一的区别是 onmouseleave 事件不支持冒泡 。

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div:nth-child(1) {
            width: 200px;
            height: 200px;
            background-color: red;
        }
 
        div:nth-child(2) {
            width: 200px;
            height: 200px;
            background-color: black;
        }
    </style>
</head>
<body>
<div></div>
<div></div>
</body>
<script type="text/javascript">
    /*
    onmouseover:属性在鼠标指针移动到元素上时触发。
    onmouseout: 属性在鼠标指针移动到元素外时触发。
    onmouseenter:属性在鼠标指针移动到元素上时触发,
                  onmouseover和onmouseenter唯一的区别是 onmouseenter 事件不支持冒泡 。
    onmouseleave:属性在鼠标指针移动到元素外时触发,
                  onmouseout和onmouseleave唯一的区别是 onmouseleave 事件不支持冒泡 。
     */
    var div = document.getElementsByTagName('div')[0];
    div.onmouseover = function () {
        div.style.backgroundColor = 'blue'
    };
    div.onmouseout = function () {
        div.style.backgroundColor = 'red'
    };
 
    var div2 = document.getElementsByTagName('div')[1];
    div2.onmouseenter = function () {
        div2.style.backgroundColor = 'yellow'
    };
    div2.onmouseleave = function () {
        div2.style.backgroundColor = 'black'
    }
</script>
</html>


用button来区分鼠标的按键:
    通过onmousedown和onmouseup来进行操作

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
 
</body>
<script type="text/javascript">
    /*
    用button来区分鼠标的按键:
        通过onmousedown和onmouseup来进行操作
     */
    document.onmousedown = function (event) {
        if (event.button === 0) {
            console.log('左键');
        } else if (event.button === 1) {
            console.log('中间滚轮');
        } else if (event.button === 2) {
            console.log('右键');
        }
    };
    document.onmouseup = function (event) {
        if (event.button === 0) {
            console.log('左键');
        } else if (event.button === 1) {
            console.log('中间滚轮');
        } else if (event.button === 2) {
            console.log('右键');
        }
    }
</script>
</html>


 div简单拖拽

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div {
            width: 100px;
            height: 100px;
            background-color: red;
            position: absolute;
            left: 0;
            top: 0;
        }
    </style>
</head>
<body>
<div></div>
</body>
<script type="text/javascript">
    /*
    一定要绝对定位,脱离文档流才可以移动。
     */
    var div = document.getElementsByTagName('div')[0];
    var disX,
        disY;
    div.onmousedown = function (e) {
        disX = e.pageX - parseInt(div.offsetLeft);
        disY = e.pageY - parseInt(div.offsetTop);
 
        document.onmousemove = function (e) {
            div.style.left = e.pageX - disX + "px";
            div.style.top = e.pageY - disY + "px";
        };
 
        document.onmouseup = function () {
            document.onmousemove = null;
        }
    };
    
</script>
</html>



找梯子最重要的就是稳定,这个已经上线三年了,一直稳定没有被封过,赶紧下载备用吧!

扫描二维码推送至手机访问。

版权声明:本文由码农翻生发布,如需转载请注明出处。

本文链接:https://lubojian.cn/post/170.html

分享给朋友:

相关文章

mousedown,mouseup,click三个事件的执行顺序

三个事件的触发时机mousedown当鼠标指针移动到元素上方,并按下鼠标按键(左、右键均可)时,会发生 mousedown 事件。与 click 事件不同,mousedown 事件仅需要按键被按下,而不需要松开即可发生。mouseup当在元...

发表评论

访客

看不清,换一张

◎欢迎参与讨论,请在这里发表您的看法和观点。