设为首页收藏本站
切换到窄版

鱼C论坛

 找回密码
 立即注册
鱼C论坛»论坛 › 技术交流 › Web开发 › 初学前端js 这两段代码有些疑问 大家帮我看下
返回列表 发新帖
查看: 2410|回复: 2

[已解决]初学前端js 这两段代码有些疑问 大家帮我看下

[复制链接]
骑乌龟的小蜗牛
发表于 2020-10-6 23:42:04 | 显示全部楼层 |阅读模式

马上注册，结交更多好友，享用更多功能^_^

您需要 登录 才可以下载或查看，没有账号？立即注册

x
两段代码一样，第一段代码除了最外层用的是获取的title元素设置监听，里面的都是用document来设置监听
第二段代码则全是用获取的title元素来设置监听 运行的效果是一样的 大佬们帮我看下 他们有什么区别吗

title.addEventListener('mousedown', function(e) {
            var x = e.pageX - login.offsetLeft;
            var y = e.pageY - login.offsetTop;
            document.addEventListener('mousemove', move)

            function move(e) {
                login.style.left = e.pageX - x + 'px';
                login.style.top = e.pageY - y + 'px';
            }
            document.addEventListener('mouseup', function() {
                document.removeEventListener('mousemove', move)
            })
        })


title.addEventListener('mousedown', function(e) {
                var x = e.pageX - login_box.offsetLeft;
                var y = e.pageY - login_box.offsetTop;

                title.addEventListener('mousemove', move)

                function move(e) {
                    login_box.style.left = e.pageX - x + 'px';
                    login_box.style.top = e.pageY - y + 'px';
                }
                title.addEventListener('mouseup', function() {
                    title.removeEventListener('mousemove', move)
                })
            })
最佳答案
月排行榜 / 总排行榜
kogawananari
2020-10-7 01:49:25
本帖最后由 kogawananari 于 2020-10-7 01:56 编辑

title属于document
title的mouseup触发后 document的mouseup也会触发
这个叫做冒泡
在你这个拖拽的特例中 事件的响应可能跟不上鼠标 鼠标甩到title之外的时候可能才判定鼠标抬起 所以mouseup事件绑定在document上更好
再提醒一下mousemove触发后的几毫秒内默认会不让mouseup触发 导致鼠标抬起后依然在拖拽的情况  所以这个事件你需要return false来取消默认行为

难一点的例子我发一个
<style>
    #imgbox {
        position: relative;
        width: 500px;
        height: 500px;
        margin: 50px auto;
        background-color: palevioletred;
    }

    #imgsorech {
        position: absolute;
        width: 200px;
        height: 200px;
        border: 1px dashed white;
        background-color: transparent;
    }

    .muki {
        position: absolute;
        width: 5px;
        height: 5px;
        border-radius: 50%;
        background-color: white;
    }

    .muki:hover {
        cursor: move;
    }

    #migishita {
        right: -3px;
        bottom: -3px;
    }

    #hibarikami {
        top: -3px;
        left: -3px;
    }

    #migikami {
        right: -3px;
        top: -3px;
    }

    #hibarishita {
        left: -3px;
        bottom: -3px;
    }

    #ennSeiyaku {
        box-sizing: border-box;
        height: 100%;
        width: 100%;
        border: 1px solid white;
        border-radius: 50%;
    }
</style>
<script>
    window.onload = function () {
        let minX = 0
        let minY = 0
        let minwidth = 50
        let minheight = 50

        imgsorech.onmousedown = function (eve) {  //拖动
            eve = eve || window.event
            let imaX = eve.clientX
            let imaY = eve.clientY
            let imawidth = imgsorech.offsetWidth
            let imaheight = imgsorech.offsetHeight
            let schX = imgsorech.offsetLeft
            let schY = imgsorech.offsetTop
            let maxX = imgbox.clientWidth + minX - imawidth
            let maxY = imgbox.clientHeight + minY - imaheight
            imgsorech.style.bottom = ''
            imgsorech.style.right = ''
            imgsorech.style.left = schX + 'px'
            imgsorech.style.top = schY + 'px'
            document.onmousemove = function (eve) {
                eve = eve || window.event
                let miraiX = eve.clientX
                let miraiY = eve.clientY
                let schleft = schX + (miraiX - imaX)
                let schtop = schY + (miraiY - imaY)
                schleft = Math.max(schleft, minX)
                schleft = Math.min(schleft, maxX)
                schtop = Math.max(schtop, minY)
                schtop = Math.min(schtop, maxY)
                imgsorech.style.left = schleft + 'px'
                imgsorech.style.top = schtop + 'px'
                return false
            }
        }

        document.onmouseup = function () {
            document.onmousemove = null
        }

        migishita.onmousedown = function (eve) {  //右下角
            eve = eve || window.event
            if (eve.stopPropagation) {
                eve.stopPropagation()
            } else {
                eve.cancelBubble = true
            }
            let imaX = eve.clientX
            let imaY = eve.clientY
            let imawidth = imgsorech.offsetWidth
            let imaheight = imgsorech.offsetHeight
            let schX = imgsorech.offsetLeft
            let schY = imgsorech.offsetTop
            let maxwidth = imgbox.clientWidth - schX - 2
            let maxheight = imgbox.clientHeight - schY - 2
            imgsorech.style.bottom = ''
            imgsorech.style.right = ''
            imgsorech.style.left = schX + 'px'
            imgsorech.style.top = schY + 'px'
            document.onmousemove = function (eve) {
                eve = eve || window.event
                let miraiX = eve.clientX
                let miraiY = eve.clientY
                let schwidth = imawidth + (miraiX - imaX)
                let schheight = imaheight + (miraiY - imaY)
                schwidth = Math.min(schwidth, maxwidth)
                schwidth = Math.max(schwidth, minwidth)
                schheight = Math.min(schheight, maxheight)
                schheight = Math.max(schheight, minheight)
                let seihoukeiSize = Math.min(schwidth, schheight)
                imgsorech.style.width = seihoukeiSize + 'px'
                imgsorech.style.height = seihoukeiSize + 'px'
                return false
            }
        }

        hibarikami.onmousedown = function (eve) {  //左上角
            eve = eve || window.event
            if (eve.stopPropagation) {
                eve.stopPropagation()
            } else {
                eve.cancelBubble = true
            }
            let imaX = eve.clientX
            let imaY = eve.clientY
            let imawidth = imgsorech.offsetWidth
            let imaheight = imgsorech.offsetHeight
            let schX = imgbox.clientWidth - imawidth - imgsorech.offsetLeft
            let schY = imgbox.clientHeight - imaheight - imgsorech.offsetTop
            let maxwidth = imgbox.clientWidth - schX - 2
            let maxheight = imgbox.clientHeight - schY - 2
            imgsorech.style.left = ''
            imgsorech.style.top = ''
            imgsorech.style.right = schX + 'px'
            imgsorech.style.bottom = schY + 'px'
            document.onmousemove = function (eve) {
                let miraiX = eve.clientX
                let miraiY = eve.clientY
                let schwidth = imawidth - (miraiX - imaX)
                let schheight = imaheight - (miraiY - imaY)
                schwidth = Math.min(schwidth, maxwidth)
                schwidth = Math.max(schwidth, minwidth)
                schheight = Math.min(schheight, maxheight)
                schheight = Math.max(schheight, minheight)
                let seihoukeiSize = Math.min(schwidth, schheight)
                imgsorech.style.width = seihoukeiSize + 'px'
                imgsorech.style.height = seihoukeiSize + 'px'
                return false
            }
        }

        migikami.onmousedown = function (eve) { //右上角
            eve = eve || window.event
            if (eve.stopPropagation) {
                eve.stopPropagation()
            } else {
                eve.cancelBubble = true
            }
            let imaX = eve.clientX
            let imaY = eve.clientY
            let imawidth = imgsorech.offsetWidth
            let imaheight = imgsorech.offsetHeight
            let schX = imgsorech.offsetLeft
            let schY = imgbox.clientHeight - imaheight - imgsorech.offsetTop
            let maxwidth = imgbox.clientWidth - schX - 2
            let maxheight = imgbox.clientHeight - schY - 2
            imgsorech.style.right = ''
            imgsorech.style.top = ''
            imgsorech.style.left = schX + 'px'
            imgsorech.style.bottom = schY + 'px'
            document.onmousemove = function (eve) {
                let miraiX = eve.clientX
                let miraiY = eve.clientY
                let schwidth = imawidth + (miraiX - imaX)
                let schheight = imaheight - (miraiY - imaY)
                schwidth = Math.min(schwidth, maxwidth)
                schwidth = Math.max(schwidth, minwidth)
                schheight = Math.min(schheight, maxheight)
                schheight = Math.max(schheight, minheight)
                let seihoukeiSize = Math.min(schwidth, schheight)
                imgsorech.style.width = seihoukeiSize + 'px'
                imgsorech.style.height = seihoukeiSize + 'px'
                return false
            }
        }

        hibarishita.onmousedown = function (eve) { //左下角
            eve = eve || window.event
            if (eve.stopPropagation) {
                eve.stopPropagation()
            } else {
                eve.cancelBubble = true
            }
            let imaX = eve.clientX
            let imaY = eve.clientY
            let imawidth = imgsorech.offsetWidth
            let imaheight = imgsorech.offsetHeight
            let schX = imgbox.clientWidth - imawidth - imgsorech.offsetLeft
            let schY = imgsorech.offsetTop
            let maxwidth = imgbox.clientWidth - schX - 2
            let maxheight = imgbox.clientHeight - schY - 2
            imgsorech.style.left = ''
            imgsorech.style.bottom = ''
            imgsorech.style.right = schX + 'px'
            imgsorech.style.top = schY + 'px'
            document.onmousemove = function (eve) {
                let miraiX = eve.clientX
                let miraiY = eve.clientY
                let schwidth = imawidth - (miraiX - imaX)
                let schheight = imaheight + (miraiY - imaY)
                schwidth = Math.min(schwidth, maxwidth)
                schwidth = Math.max(schwidth, minwidth)
                schheight = Math.min(schheight, maxheight)
                schheight = Math.max(schheight, minheight)
                let seihoukeiSize = Math.min(schwidth, schheight)
                imgsorech.style.width = seihoukeiSize + 'px'
                imgsorech.style.height = seihoukeiSize + 'px'
                return false
            }
        }
    }
</script>
<div id="imgbox">
    <div id="imgsorech">
        <div id="ennSeiyaku">
        </div>
        <div id="migishita" class="muki">
        </div>
        <div id="hibarikami" class="muki">
        </div>
        <div id="migikami" class="muki">
        </div>
        <div id="hibarishita" class="muki">
        </div>
    </div>
</div>
想知道小甲鱼最近在做啥？请访问 -> ilovefishc.com
回复

使用道具 举报

kogawananari
发表于 2020-10-7 01:49:25 | 显示全部楼层    本楼为最佳答案   
本帖最后由 kogawananari 于 2020-10-7 01:56 编辑

title属于document
title的mouseup触发后 document的mouseup也会触发
这个叫做冒泡
在你这个拖拽的特例中 事件的响应可能跟不上鼠标 鼠标甩到title之外的时候可能才判定鼠标抬起 所以mouseup事件绑定在document上更好
再提醒一下mousemove触发后的几毫秒内默认会不让mouseup触发 导致鼠标抬起后依然在拖拽的情况  所以这个事件你需要return false来取消默认行为

难一点的例子我发一个
<style>
    #imgbox {
        position: relative;
        width: 500px;
        height: 500px;
        margin: 50px auto;
        background-color: palevioletred;
    }

    #imgsorech {
        position: absolute;
        width: 200px;
        height: 200px;
        border: 1px dashed white;
        background-color: transparent;
    }

    .muki {
        position: absolute;
        width: 5px;
        height: 5px;
        border-radius: 50%;
        background-color: white;
    }

    .muki:hover {
        cursor: move;
    }

    #migishita {
        right: -3px;
        bottom: -3px;
    }

    #hibarikami {
        top: -3px;
        left: -3px;
    }

    #migikami {
        right: -3px;
        top: -3px;
    }

    #hibarishita {
        left: -3px;
        bottom: -3px;
    }

    #ennSeiyaku {
        box-sizing: border-box;
        height: 100%;
        width: 100%;
        border: 1px solid white;
        border-radius: 50%;
    }
</style>
<script>
    window.onload = function () {
        let minX = 0
        let minY = 0
        let minwidth = 50
        let minheight = 50

        imgsorech.onmousedown = function (eve) {  //拖动
            eve = eve || window.event
            let imaX = eve.clientX
            let imaY = eve.clientY
            let imawidth = imgsorech.offsetWidth
            let imaheight = imgsorech.offsetHeight
            let schX = imgsorech.offsetLeft
            let schY = imgsorech.offsetTop
            let maxX = imgbox.clientWidth + minX - imawidth
            let maxY = imgbox.clientHeight + minY - imaheight
            imgsorech.style.bottom = ''
            imgsorech.style.right = ''
            imgsorech.style.left = schX + 'px'
            imgsorech.style.top = schY + 'px'
            document.onmousemove = function (eve) {
                eve = eve || window.event
                let miraiX = eve.clientX
                let miraiY = eve.clientY
                let schleft = schX + (miraiX - imaX)
                let schtop = schY + (miraiY - imaY)
                schleft = Math.max(schleft, minX)
                schleft = Math.min(schleft, maxX)
                schtop = Math.max(schtop, minY)
                schtop = Math.min(schtop, maxY)
                imgsorech.style.left = schleft + 'px'
                imgsorech.style.top = schtop + 'px'
                return false
            }
        }

        document.onmouseup = function () {
            document.onmousemove = null
        }

        migishita.onmousedown = function (eve) {  //右下角
            eve = eve || window.event
            if (eve.stopPropagation) {
                eve.stopPropagation()
            } else {
                eve.cancelBubble = true
            }
            let imaX = eve.clientX
            let imaY = eve.clientY
            let imawidth = imgsorech.offsetWidth
            let imaheight = imgsorech.offsetHeight
            let schX = imgsorech.offsetLeft
            let schY = imgsorech.offsetTop
            let maxwidth = imgbox.clientWidth - schX - 2
            let maxheight = imgbox.clientHeight - schY - 2
            imgsorech.style.bottom = ''
            imgsorech.style.right = ''
            imgsorech.style.left = schX + 'px'
            imgsorech.style.top = schY + 'px'
            document.onmousemove = function (eve) {
                eve = eve || window.event
                let miraiX = eve.clientX
                let miraiY = eve.clientY
                let schwidth = imawidth + (miraiX - imaX)
                let schheight = imaheight + (miraiY - imaY)
                schwidth = Math.min(schwidth, maxwidth)
                schwidth = Math.max(schwidth, minwidth)
                schheight = Math.min(schheight, maxheight)
                schheight = Math.max(schheight, minheight)
                let seihoukeiSize = Math.min(schwidth, schheight)
                imgsorech.style.width = seihoukeiSize + 'px'
                imgsorech.style.height = seihoukeiSize + 'px'
                return false
            }
        }

        hibarikami.onmousedown = function (eve) {  //左上角
            eve = eve || window.event
            if (eve.stopPropagation) {
                eve.stopPropagation()
            } else {
                eve.cancelBubble = true
            }
            let imaX = eve.clientX
            let imaY = eve.clientY
            let imawidth = imgsorech.offsetWidth
            let imaheight = imgsorech.offsetHeight
            let schX = imgbox.clientWidth - imawidth - imgsorech.offsetLeft
            let schY = imgbox.clientHeight - imaheight - imgsorech.offsetTop
            let maxwidth = imgbox.clientWidth - schX - 2
            let maxheight = imgbox.clientHeight - schY - 2
            imgsorech.style.left = ''
            imgsorech.style.top = ''
            imgsorech.style.right = schX + 'px'
            imgsorech.style.bottom = schY + 'px'
            document.onmousemove = function (eve) {
                let miraiX = eve.clientX
                let miraiY = eve.clientY
                let schwidth = imawidth - (miraiX - imaX)
                let schheight = imaheight - (miraiY - imaY)
                schwidth = Math.min(schwidth, maxwidth)
                schwidth = Math.max(schwidth, minwidth)
                schheight = Math.min(schheight, maxheight)
                schheight = Math.max(schheight, minheight)
                let seihoukeiSize = Math.min(schwidth, schheight)
                imgsorech.style.width = seihoukeiSize + 'px'
                imgsorech.style.height = seihoukeiSize + 'px'
                return false
            }
        }

        migikami.onmousedown = function (eve) { //右上角
            eve = eve || window.event
            if (eve.stopPropagation) {
                eve.stopPropagation()
            } else {
                eve.cancelBubble = true
            }
            let imaX = eve.clientX
            let imaY = eve.clientY
            let imawidth = imgsorech.offsetWidth
            let imaheight = imgsorech.offsetHeight
            let schX = imgsorech.offsetLeft
            let schY = imgbox.clientHeight - imaheight - imgsorech.offsetTop
            let maxwidth = imgbox.clientWidth - schX - 2
            let maxheight = imgbox.clientHeight - schY - 2
            imgsorech.style.right = ''
            imgsorech.style.top = ''
            imgsorech.style.left = schX + 'px'
            imgsorech.style.bottom = schY + 'px'
            document.onmousemove = function (eve) {
                let miraiX = eve.clientX
                let miraiY = eve.clientY
                let schwidth = imawidth + (miraiX - imaX)
                let schheight = imaheight - (miraiY - imaY)
                schwidth = Math.min(schwidth, maxwidth)
                schwidth = Math.max(schwidth, minwidth)
                schheight = Math.min(schheight, maxheight)
                schheight = Math.max(schheight, minheight)
                let seihoukeiSize = Math.min(schwidth, schheight)
                imgsorech.style.width = seihoukeiSize + 'px'
                imgsorech.style.height = seihoukeiSize + 'px'
                return false
            }
        }

        hibarishita.onmousedown = function (eve) { //左下角
            eve = eve || window.event
            if (eve.stopPropagation) {
                eve.stopPropagation()
            } else {
                eve.cancelBubble = true
            }
            let imaX = eve.clientX
            let imaY = eve.clientY
            let imawidth = imgsorech.offsetWidth
            let imaheight = imgsorech.offsetHeight
            let schX = imgbox.clientWidth - imawidth - imgsorech.offsetLeft
            let schY = imgsorech.offsetTop
            let maxwidth = imgbox.clientWidth - schX - 2
            let maxheight = imgbox.clientHeight - schY - 2
            imgsorech.style.left = ''
            imgsorech.style.bottom = ''
            imgsorech.style.right = schX + 'px'
            imgsorech.style.top = schY + 'px'
            document.onmousemove = function (eve) {
                let miraiX = eve.clientX
                let miraiY = eve.clientY
                let schwidth = imawidth - (miraiX - imaX)
                let schheight = imaheight + (miraiY - imaY)
                schwidth = Math.min(schwidth, maxwidth)
                schwidth = Math.max(schwidth, minwidth)
                schheight = Math.min(schheight, maxheight)
                schheight = Math.max(schheight, minheight)
                let seihoukeiSize = Math.min(schwidth, schheight)
                imgsorech.style.width = seihoukeiSize + 'px'
                imgsorech.style.height = seihoukeiSize + 'px'
                return false
            }
        }
    }
</script>
<div id="imgbox">
    <div id="imgsorech">
        <div id="ennSeiyaku">
        </div>
        <div id="migishita" class="muki">
        </div>
        <div id="hibarikami" class="muki">
        </div>
        <div id="migikami" class="muki">
        </div>
        <div id="hibarishita" class="muki">
        </div>
    </div>
</div>
想知道小甲鱼最近在做啥？请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

骑乌龟的小蜗牛
 楼主| 发表于 2020-10-7 09:27:23 | 显示全部楼层
kogawananari 发表于 2020-10-7 01:49
title属于document
title的mouseup触发后 document的mouseup也会触发
这个叫做冒泡

谢谢
想知道小甲鱼最近在做啥？请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

返回列表 发新帖
高级模式
B Color Image Link Quote Code Smilies
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

小黑屋|手机版|Archiver|鱼C工作室 ( 粤ICP备18085999号-1 | 粤公网安备 44051102000585号)

GMT+8, 2024-12-23 22:50

Powered by Discuz! X3.4

© 2001-2023 Discuz! Team.

快速回复 返回顶部 返回列表