骑乌龟的小蜗牛 发表于 2020-10-6 23:42:04

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

两段代码一样，第一段代码除了最外层用的是获取的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>

骑乌龟的小蜗牛 发表于 2020-10-7 09:27:23

kogawananari 发表于 2020-10-7 01:49
title属于document
title的mouseup触发后 document的mouseup也会触发
这个叫做冒泡


{:5_109:}谢谢
页: [1]
查看完整版本: 初学前端js 这两段代码有些疑问 大家帮我看下