(Javascript经典案例) -- 捕获鼠标点击位置并将元素移动到该位置

最新推荐文章于 2023-05-18 11:26:22 发布

杨笑常

最新推荐文章于 2023-05-18 11:26:22 发布

阅读量2.9k

点赞数

分类专栏： event javascript 文章标签： javascript 鼠标点击坐标鼠标 event

javascript 同时被 2 个专栏收录

3 篇文章 0 订阅

订阅专栏

event

1 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>Box Click Box Move//捕获鼠标点击位置并将元素移动到该位置</title>
    <style type="text/css">
        #info{
            width: 100px;
            height: 100px;
            background-color: #ff0000;
            position: absolute;
            top:0;
            left:0;
        }

    </style>
</head>
<body>
    <div id="info"></div>
    <script>
        window.onload = function(){
            console.log("不支持ie7--对style使用了setAttribute");
            console.log('捕获鼠标点击位置并将元素移动到该位置');
            console.log('MOzilla 对事件的对象提供很好的文档，参见https://developer.mozilla.org/En/DOM/Event');
            document.onclick = processClick;
        }

        function processClick(evt){
            //输出evt 的值 ，查看event对象
            console.log(evt);
            //window使用window对象访问event,其他 将Event对象作为事件处理程序的一个参数传递
            evt = evt || window.event;
            var x=0;
            var y=0;
            //其他浏览器(非ie)使用pageX
            if(evt.pageX){
                x = evt.pageX;
                y = evt.pageY;
                //（ie浏览器使用clientX,且要考虑偏移值）
            }else if(evt.clientX){
                var offsetX = 0;
                var offsetY = 0;
                //ie 6 版本以上使用
                if(document.documentElement.scrollLeft){
                    offsetX = document.documentElement.scrollLeft;
                    offsetY = document.documentElement.scrollTop;
                    // ie 6 比较旧的版本
                }else if(document.body){
                    offsetX = document.body.scrollLeft;
                    offsetY = document.body.scrollTop;
                }
                x = evt.clientX + offsetX;
                y = evt.clientY + offsetY;
            }

            var style = "left:"+ x + "px; top : "+ y + "px";
            console.log(style);
            var box = document.getElementById('info');
            box.setAttribute('style',style);
        }



    </script>
</body>
</html>

杨笑常

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
(Javascript经典案例) -- 捕获鼠标点击位置并将元素移动到该位置

捕获鼠标点击位置并将元素移动到该位置 ---Javascript经典案例，不支持ie7--对style使用了setAttribute，查看源码，F12（注释详细解答）
复制链接

扫一扫