JavaScript习题（封装一个方法，实现一个dom元素的拖曳效果）_removeevent(document, 'mouseup', 传参数-CSDN博客

本文链接：https://blog.csdn.net/weixin_46611729/article/details/107060973

以下是HTML页面的代码：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>中国的流浪猫</title>
    <link rel="stylesheet" type="text/css" href="regality.css">
</head>

<body>
    <div style="width: 200px;height: 200px;background-color: green;position: absolute;left: 0;top: 0">
    </div>
 
    <script type="text/javascript" src="lesson.js">
    </script>
</body>

</html>

var div = document.getElementsByTagName('div')[0];

function drag(elem) {
    var disX,
        disY;
    addEvent(elem, 'mousedown', function(e) {
        var event = e || window.event;
        disX = event.clientX - parseInt(getStyle(elem, 'left'));
        disY = event.clientY - parseInt(getStyle(elem, 'top'));
        addEvent(document, 'mousemove', mouseMove);
        addEvent(document, 'mouseup', mouseUp);
        stopBubble(event);
        cancelHandler(event);
    });
        function mouseMove(e) {
        	var event = e || window.event;
            elem.style.left = event.clientX - disX + 'px';
            elem.style.top = event.clientY - disY + 'px';
        };
        function mouseUp(e) {
        	var event = e || window.event;
            document.removeEventListener( 'mousemove', mouseMove);
            document.removeEventListener('mouseup', mouseUp);
        };   
}

drag(div);

//封装方法，查询dom元素的样式，
//prop（元素的属性）传参数的时候的传字符串形式
function getStyle(elem, prop) {
    if (window.getComputedStyle) {
        return window.getComputedStyle(elem, null)[prop];
    } else {
        return elem.currentStyle[prop];
    }
}

//封装方法，给dom元素添加事件类型函数，elem指代dom元素，type指代事件类型（例如'click'),handle指代函数
function addEvent(elem, type, handle) {
    if (elem.addEventListener) {
        elem.addEventListener(type, handle, false)
    } else if (elem.attachEvent) {
        elem.attachEvent('on' + type, function() {
            handle.call(elem);
        })
    } else {
        elem['on' + type] = handle;
    }
}

//封装方法，取消冒泡
function stopBubble(event) {
    if (event.stopPropagation) {
        event.stopPropagation();
    } else {
        event.cancelBubble = true;
    }
}

//封装方法，取消默认
function cancelHandler(event) {
    if (event.preventDefault) {
        event.preventDefault();
    } else {
        event.returnValue = false;
    }
}