本文目录

JavaScript 鼠标跟随移动

🌙
手机阅读
本文目录结构

1

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        #div1{width: 200px;height: 200px;background: orange;}
    </style>
</head>
<body>
<div id="div1"></div>
</body>
</html>
<script>
    var oDiv=document.getElementById("div1");
    oDiv.onmousemove=function(event){
        //直接把一个方法赋值给一个事件属性.这个方法运行的时候,浏览器会自动的给这个方法传一个对象;这个对象就是事件对象;
        event=event||window.event;//IE下的事件对象,是一个全局的event;这种的是兼容写法;
        event.clientX;//鼠标的X轴坐标;
        event.clientY;//鼠标的Y轴坐标;
        //时间有即时行;
        event.type;//事件类型;只和当时发生的类型有关;只能同时处理一个事件;
        this.innerHTML="X:"+event.clientX+" Y:"+event.clientY;
    };

    document.documentElement.onkeydown= function (event) {
        event=event||window.event;
        oDiv.innerHTML=event.keyCode;
    }

</script>

2

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        #div1{width: 200px;height: 200px;background: orange;}
        #newDiv{width: 400px;height: 400px;background: red;position: absolute;color: black;}
    </style>
</head>
<body>
<div id="div1"></div>
</body>
</html>
<script>
    var oDiv=document.getElementById("div1");
    var flag=1;
    oDiv.onmouseover=function(event) {
        if(flag){
            var event=event||window.event;
            var newDiv=document.createElement("div");
            newDiv.id="newDiv";
            newDiv.innerHTML="哈哈哈哈哈哈哈哈哈哈";
            newDiv.style.left=event.clientX+"px";
            newDiv.style.top=event.clientY+"px";
            document.body.appendChild(newDiv);
            flag=0;
        }
    };
    oDiv.onmousemove=function(event) {
        event=event||window.event;
        var newDiv=document.getElementById("newDiv");
        newDiv.style.left=event.clientX+10+"px";
        newDiv.style.top=event.clientY+20+"px";
    };
    oDiv.onmouseout= function (event) {
        document.body.removeChild(newDiv);
        flag=1;
    };

    //pageX;pageY;鼠标距离文档(当前页面的)最上角的距离;不支持IE678;
    //clientX;clientY;指的是浏览器;
    //onmouseover和onmouseenter区别;over会传播,enter是不传播的;
    //onmouseout和onmouselive区别;

    // onmouseover和onmouseenter很像,但是可以避免onmouseover的一些问题;
    // 如果是从父元素到子元素,不会触发onmouseover;
    // 如果是从子元素到父元素,也不会触发onmouseover;

    //阻止事件传播/冒泡的方法;
/*    this.appendChild(ele);
    ele.onmouseover=function(event){
        event=event||window.event;
        if(event.stopPropagation){
            event.stopPropagation();//标准留言器中禁止冒泡;
            //stopPropagation是禁止传播的意思;
            // preventDefault中文意思是阻止默认行为;
        }else{
            event.cancelBubble=true;//IE浏览器禁止冒泡;IE678;cancelBubble中文是取消冒泡的意思;
        }
    }*/
</script>

AXIHE / 精选资源

浏览全部教程

面试题

学习网站

前端培训
自己甄别

前端书籍

关于朱安邦

我叫 朱安邦,阿西河的站长,在杭州。

以前是一名平面设计师,后来开始接接触前端开发,主要研究前端技术中的JS方向。

业余时间我喜欢分享和交流自己的技术,欢迎大家关注我的 Bilibili

关注我: Github / 知乎

于2021年离开前端领域,目前重心放在研究区块链上面了

我叫朱安邦,阿西河的站长

目前在杭州从事区块链周边的开发工作,机械专业,以前从事平面设计工作。

2014年底脱产在老家自学6个月的前端技术,自学期间几乎从未出过家门,最终找到了满意的前端工作。更多>

于2021年离开前端领域,目前从事区块链方面工作了