完美拖拽-return false的用法-事件绑定

最新推荐文章于 2021-09-29 18:00:59 发布

zhaoke_930325

最新推荐文章于 2021-09-29 18:00:59 发布

阅读量579

点赞数 1

分类专栏：实例文章标签：鼠标移动

本文链接：https://blog.csdn.net/zhaoke_930325/article/details/76246468

版权

实例专栏收录该内容

10 篇文章 0 订阅

订阅专栏

1.return false可以用来阻止默认事件即系统默认事件。例如通过阻止默认事件，来对textarea中的值进行范围限制（通过限制keycode的数值），也可以自定义在页面中的右键菜单（oncontextmenu）。

2.在鼠标移动（mousemove）等事件中，是需要给事件传一个参数，保证程序的正常运行。而为了兼容取事件方法为：var oEvent=ev||event;

3.在节点中创建一个新的节点的方法为：

var oBox=document.createElement('div');
                oBox.className='box';
                oBox.style.left = oDiv.offsetLeft+'px';
                oBox.style.top = oDiv.offsetTop+'px';
                oBox.style.width = oDiv.offsetWidth+'px';
                oBox.style.height = oDiv.offsetHeight+'px';
                document.body.appendChild(oBox);
                //注意，在创建完之后一定要将创建好的节点加入body中！！！

4、取消事件冒泡（不往父级传递）： cancelBubble用于ie的阻止冒泡事件，event.stopPropagation（）用于firefox和chrome等其他浏览器。
5、事件绑定：同一个事件加多次函数会被覆盖，而绑定不会。
IE方式：
attachEvent(‘’事件名‘’（前面加有on的），函数)绑定事件处理函数。
detachEvent（‘’事件名‘’（前面加有on的），函数）解除绑定。
DOM方式：
addEventListener（事件名称(没有on)，函数，捕获（一般都为false））
aremoveEventListener（事件名称(没有on)，函数，捕获（一般都为false））
可以同时加很多事件而不相互影响。并且可以封装为函数function(obj,ev,fn)
兼容如下：

if (obtn.attachEvent){IE}else{FF}.

事件捕获：setcapture()将事件都集中在一个地方，但是只有IE支持。
下列为完整代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>完美拖拽2</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        #div1{
            width: 150px;
            height: 150px;
            background: #71C525;
            position: absolute;
        }
        .box{
            border: 2px dashed black;
            position: absolute;
        }
    </style>
    <script>
        window.onload=function()
        {
            var oDiv = document.getElementById('div1');
            var disX=null;
            var disY=null;

            oDiv.onmousedown=function(ev)
            {
                var oEvent=event||ev;
                disX=oEvent.clientX-oDiv.offsetLeft;
                disY=oEvent.clientY-oDiv.offsetTop;

                var oBox=document.createElement('div');
                oBox.className='box';
                oBox.style.left = oDiv.offsetLeft+'px';
                oBox.style.top = oDiv.offsetTop+'px';
                oBox.style.width = oDiv.offsetWidth+'px';
                oBox.style.height = oDiv.offsetHeight+'px';

                document.body.appendChild(oBox);

                document.onmousemove=function(ev)
                {
                    var oEvent=event||ev;
                    var l=oEvent.clientX-disX;
                    var t=oEvent.clientY-disY;

                    if (l<0) {
                        l=0;
                    } else if (l>document.documentElement.clientWidth-oDiv.offsetWidth) {
                        l=document.documentElement.clientWidth-oDiv.offsetWidth;
                    }
                    if (t<0) {
                        t=0;
                    } else if (t>document.documentElement.clientHeight-oDiv.offsetHeight) {
                        t=document.documentElement.clientHeight-oDiv.offsetHeight;
                    }

                    oBox.style.left = l+'px';
                    oBox.style.top=t+'px';

                };
                document.onmouseup=function()
                {
                    document.onmousedown=null;
                    document.onmousemove=null;
                    oDiv.style.left = oBox.offsetLeft+'px';
                    oDiv.style.top = oBox.offsetTop+'px';
                    document.body.removeChild(oBox);
                    oDiv.releaseCapture();//取消捕获，不影响其他事件
                };
                oDiv.setCapture();//IE中的事件捕获
                return false;//阻止默认事件（系统默认事件）！
            };
        };
    </script>
</head>
<body>
    <div id="div1"></div>
</body>
</html>

zhaoke_930325

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
完美拖拽-return false的用法-事件绑定

1.return false可以用来阻止默认事件即系统默认事件。例如通过阻止默认事件，来对textarea中的值进行范围限制（通过限制keycode的数值），也可以自定义在页面中的右键菜单（oncontextmenu）。2.在鼠标移动（mousemove）等事件中，是需要给事件传一个参数，保证程序的正常运行。而为了兼容取事件方法为：var oEvent=ev||event;3.在节点中创建一个新的节
复制链接

扫一扫