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

鱼C论坛

 找回密码
 立即注册
鱼C论坛»论坛 › 编程语言专区 › Web开发 › 初学前端js 这两段代码有些疑问 大家帮我看下
返回列表 发新帖
查看: 2776|回复: 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来取消默认行为

难一点的例子我发一个
  1. <style>
  2.     #imgbox {
  3.         position: relative;
  4.         width: 500px;
  5.         height: 500px;
  6.         margin: 50px auto;
  7.         background-color: palevioletred;
  8.     }

  10.     #imgsorech {
  11.         position: absolute;
  12.         width: 200px;
  13.         height: 200px;
  14.         border: 1px dashed white;
  15.         background-color: transparent;
  16.     }

  18.     .muki {
  19.         position: absolute;
  20.         width: 5px;
  21.         height: 5px;
  22.         border-radius: 50%;
  23.         background-color: white;
  24.     }

  26.     .muki:hover {
  27.         cursor: move;
  28.     }

  30.     #migishita {
  31.         right: -3px;
  32.         bottom: -3px;
  33.     }

  35.     #hibarikami {
  36.         top: -3px;
  37.         left: -3px;
  38.     }

  40.     #migikami {
  41.         right: -3px;
  42.         top: -3px;
  43.     }

  45.     #hibarishita {
  46.         left: -3px;
  47.         bottom: -3px;
  48.     }

  50.     #ennSeiyaku {
  51.         box-sizing: border-box;
  52.         height: 100%;
  53.         width: 100%;
  54.         border: 1px solid white;
  55.         border-radius: 50%;
  56.     }
  57. </style>
  58. <script>
  59.     window.onload = function () {
  60.         let minX = 0
  61.         let minY = 0
  62.         let minwidth = 50
  63.         let minheight = 50

  65.         imgsorech.onmousedown = function (eve) {  //拖动
  66.             eve = eve || window.event
  67.             let imaX = eve.clientX
  68.             let imaY = eve.clientY
  69.             let imawidth = imgsorech.offsetWidth
  70.             let imaheight = imgsorech.offsetHeight
  71.             let schX = imgsorech.offsetLeft
  72.             let schY = imgsorech.offsetTop
  73.             let maxX = imgbox.clientWidth + minX - imawidth
  74.             let maxY = imgbox.clientHeight + minY - imaheight
  75.             imgsorech.style.bottom = ''
  76.             imgsorech.style.right = ''
  77.             imgsorech.style.left = schX + 'px'
  78.             imgsorech.style.top = schY + 'px'
  79.             document.onmousemove = function (eve) {
  80.                 eve = eve || window.event
  81.                 let miraiX = eve.clientX
  82.                 let miraiY = eve.clientY
  83.                 let schleft = schX + (miraiX - imaX)
  84.                 let schtop = schY + (miraiY - imaY)
  85.                 schleft = Math.max(schleft, minX)
  86.                 schleft = Math.min(schleft, maxX)
  87.                 schtop = Math.max(schtop, minY)
  88.                 schtop = Math.min(schtop, maxY)
  89.                 imgsorech.style.left = schleft + 'px'
  90.                 imgsorech.style.top = schtop + 'px'
  91.                 return false
  92.             }
  93.         }

  95.         document.onmouseup = function () {
  96.             document.onmousemove = null
  97.         }

  99.         migishita.onmousedown = function (eve) {  //右下角
  100.             eve = eve || window.event
  101.             if (eve.stopPropagation) {
  102.                 eve.stopPropagation()
  103.             } else {
  104.                 eve.cancelBubble = true
  105.             }
  106.             let imaX = eve.clientX
  107.             let imaY = eve.clientY
  108.             let imawidth = imgsorech.offsetWidth
  109.             let imaheight = imgsorech.offsetHeight
  110.             let schX = imgsorech.offsetLeft
  111.             let schY = imgsorech.offsetTop
  112.             let maxwidth = imgbox.clientWidth - schX - 2
  113.             let maxheight = imgbox.clientHeight - schY - 2
  114.             imgsorech.style.bottom = ''
  115.             imgsorech.style.right = ''
  116.             imgsorech.style.left = schX + 'px'
  117.             imgsorech.style.top = schY + 'px'
  118.             document.onmousemove = function (eve) {
  119.                 eve = eve || window.event
  120.                 let miraiX = eve.clientX
  121.                 let miraiY = eve.clientY
  122.                 let schwidth = imawidth + (miraiX - imaX)
  123.                 let schheight = imaheight + (miraiY - imaY)
  124.                 schwidth = Math.min(schwidth, maxwidth)
  125.                 schwidth = Math.max(schwidth, minwidth)
  126.                 schheight = Math.min(schheight, maxheight)
  127.                 schheight = Math.max(schheight, minheight)
  128.                 let seihoukeiSize = Math.min(schwidth, schheight)
  129.                 imgsorech.style.width = seihoukeiSize + 'px'
  130.                 imgsorech.style.height = seihoukeiSize + 'px'
  131.                 return false
  132.             }
  133.         }

  135.         hibarikami.onmousedown = function (eve) {  //左上角
  136.             eve = eve || window.event
  137.             if (eve.stopPropagation) {
  138.                 eve.stopPropagation()
  139.             } else {
  140.                 eve.cancelBubble = true
  141.             }
  142.             let imaX = eve.clientX
  143.             let imaY = eve.clientY
  144.             let imawidth = imgsorech.offsetWidth
  145.             let imaheight = imgsorech.offsetHeight
  146.             let schX = imgbox.clientWidth - imawidth - imgsorech.offsetLeft
  147.             let schY = imgbox.clientHeight - imaheight - imgsorech.offsetTop
  148.             let maxwidth = imgbox.clientWidth - schX - 2
  149.             let maxheight = imgbox.clientHeight - schY - 2
  150.             imgsorech.style.left = ''
  151.             imgsorech.style.top = ''
  152.             imgsorech.style.right = schX + 'px'
  153.             imgsorech.style.bottom = schY + 'px'
  154.             document.onmousemove = function (eve) {
  155.                 let miraiX = eve.clientX
  156.                 let miraiY = eve.clientY
  157.                 let schwidth = imawidth - (miraiX - imaX)
  158.                 let schheight = imaheight - (miraiY - imaY)
  159.                 schwidth = Math.min(schwidth, maxwidth)
  160.                 schwidth = Math.max(schwidth, minwidth)
  161.                 schheight = Math.min(schheight, maxheight)
  162.                 schheight = Math.max(schheight, minheight)
  163.                 let seihoukeiSize = Math.min(schwidth, schheight)
  164.                 imgsorech.style.width = seihoukeiSize + 'px'
  165.                 imgsorech.style.height = seihoukeiSize + 'px'
  166.                 return false
  167.             }
  168.         }

  170.         migikami.onmousedown = function (eve) { //右上角
  171.             eve = eve || window.event
  172.             if (eve.stopPropagation) {
  173.                 eve.stopPropagation()
  174.             } else {
  175.                 eve.cancelBubble = true
  176.             }
  177.             let imaX = eve.clientX
  178.             let imaY = eve.clientY
  179.             let imawidth = imgsorech.offsetWidth
  180.             let imaheight = imgsorech.offsetHeight
  181.             let schX = imgsorech.offsetLeft
  182.             let schY = imgbox.clientHeight - imaheight - imgsorech.offsetTop
  183.             let maxwidth = imgbox.clientWidth - schX - 2
  184.             let maxheight = imgbox.clientHeight - schY - 2
  185.             imgsorech.style.right = ''
  186.             imgsorech.style.top = ''
  187.             imgsorech.style.left = schX + 'px'
  188.             imgsorech.style.bottom = schY + 'px'
  189.             document.onmousemove = function (eve) {
  190.                 let miraiX = eve.clientX
  191.                 let miraiY = eve.clientY
  192.                 let schwidth = imawidth + (miraiX - imaX)
  193.                 let schheight = imaheight - (miraiY - imaY)
  194.                 schwidth = Math.min(schwidth, maxwidth)
  195.                 schwidth = Math.max(schwidth, minwidth)
  196.                 schheight = Math.min(schheight, maxheight)
  197.                 schheight = Math.max(schheight, minheight)
  198.                 let seihoukeiSize = Math.min(schwidth, schheight)
  199.                 imgsorech.style.width = seihoukeiSize + 'px'
  200.                 imgsorech.style.height = seihoukeiSize + 'px'
  201.                 return false
  202.             }
  203.         }

  205.         hibarishita.onmousedown = function (eve) { //左下角
  206.             eve = eve || window.event
  207.             if (eve.stopPropagation) {
  208.                 eve.stopPropagation()
  209.             } else {
  210.                 eve.cancelBubble = true
  211.             }
  212.             let imaX = eve.clientX
  213.             let imaY = eve.clientY
  214.             let imawidth = imgsorech.offsetWidth
  215.             let imaheight = imgsorech.offsetHeight
  216.             let schX = imgbox.clientWidth - imawidth - imgsorech.offsetLeft
  217.             let schY = imgsorech.offsetTop
  218.             let maxwidth = imgbox.clientWidth - schX - 2
  219.             let maxheight = imgbox.clientHeight - schY - 2
  220.             imgsorech.style.left = ''
  221.             imgsorech.style.bottom = ''
  222.             imgsorech.style.right = schX + 'px'
  223.             imgsorech.style.top = schY + 'px'
  224.             document.onmousemove = function (eve) {
  225.                 let miraiX = eve.clientX
  226.                 let miraiY = eve.clientY
  227.                 let schwidth = imawidth - (miraiX - imaX)
  228.                 let schheight = imaheight + (miraiY - imaY)
  229.                 schwidth = Math.min(schwidth, maxwidth)
  230.                 schwidth = Math.max(schwidth, minwidth)
  231.                 schheight = Math.min(schheight, maxheight)
  232.                 schheight = Math.max(schheight, minheight)
  233.                 let seihoukeiSize = Math.min(schwidth, schheight)
  234.                 imgsorech.style.width = seihoukeiSize + 'px'
  235.                 imgsorech.style.height = seihoukeiSize + 'px'
  236.                 return false
  237.             }
  238.         }
  239.     }
  240. </script>
  241. <div id="imgbox">
  242.     <div id="imgsorech">
  243.         <div id="ennSeiyaku">
  244.         </div>
  245.         <div id="migishita" class="muki">
  246.         </div>
  247.         <div id="hibarikami" class="muki">
  248.         </div>
  249.         <div id="migikami" class="muki">
  250.         </div>
  251.         <div id="hibarishita" class="muki">
  252.         </div>
  253.     </div>
  254. </div>
复制代码
小甲鱼最新课程 -> https://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来取消默认行为

难一点的例子我发一个
  1. <style>
  2.     #imgbox {
  3.         position: relative;
  4.         width: 500px;
  5.         height: 500px;
  6.         margin: 50px auto;
  7.         background-color: palevioletred;
  8.     }

  10.     #imgsorech {
  11.         position: absolute;
  12.         width: 200px;
  13.         height: 200px;
  14.         border: 1px dashed white;
  15.         background-color: transparent;
  16.     }

  18.     .muki {
  19.         position: absolute;
  20.         width: 5px;
  21.         height: 5px;
  22.         border-radius: 50%;
  23.         background-color: white;
  24.     }

  26.     .muki:hover {
  27.         cursor: move;
  28.     }

  30.     #migishita {
  31.         right: -3px;
  32.         bottom: -3px;
  33.     }

  35.     #hibarikami {
  36.         top: -3px;
  37.         left: -3px;
  38.     }

  40.     #migikami {
  41.         right: -3px;
  42.         top: -3px;
  43.     }

  45.     #hibarishita {
  46.         left: -3px;
  47.         bottom: -3px;
  48.     }

  50.     #ennSeiyaku {
  51.         box-sizing: border-box;
  52.         height: 100%;
  53.         width: 100%;
  54.         border: 1px solid white;
  55.         border-radius: 50%;
  56.     }
  57. </style>
  58. <script>
  59.     window.onload = function () {
  60.         let minX = 0
  61.         let minY = 0
  62.         let minwidth = 50
  63.         let minheight = 50

  65.         imgsorech.onmousedown = function (eve) {  //拖动
  66.             eve = eve || window.event
  67.             let imaX = eve.clientX
  68.             let imaY = eve.clientY
  69.             let imawidth = imgsorech.offsetWidth
  70.             let imaheight = imgsorech.offsetHeight
  71.             let schX = imgsorech.offsetLeft
  72.             let schY = imgsorech.offsetTop
  73.             let maxX = imgbox.clientWidth + minX - imawidth
  74.             let maxY = imgbox.clientHeight + minY - imaheight
  75.             imgsorech.style.bottom = ''
  76.             imgsorech.style.right = ''
  77.             imgsorech.style.left = schX + 'px'
  78.             imgsorech.style.top = schY + 'px'
  79.             document.onmousemove = function (eve) {
  80.                 eve = eve || window.event
  81.                 let miraiX = eve.clientX
  82.                 let miraiY = eve.clientY
  83.                 let schleft = schX + (miraiX - imaX)
  84.                 let schtop = schY + (miraiY - imaY)
  85.                 schleft = Math.max(schleft, minX)
  86.                 schleft = Math.min(schleft, maxX)
  87.                 schtop = Math.max(schtop, minY)
  88.                 schtop = Math.min(schtop, maxY)
  89.                 imgsorech.style.left = schleft + 'px'
  90.                 imgsorech.style.top = schtop + 'px'
  91.                 return false
  92.             }
  93.         }

  95.         document.onmouseup = function () {
  96.             document.onmousemove = null
  97.         }

  99.         migishita.onmousedown = function (eve) {  //右下角
  100.             eve = eve || window.event
  101.             if (eve.stopPropagation) {
  102.                 eve.stopPropagation()
  103.             } else {
  104.                 eve.cancelBubble = true
  105.             }
  106.             let imaX = eve.clientX
  107.             let imaY = eve.clientY
  108.             let imawidth = imgsorech.offsetWidth
  109.             let imaheight = imgsorech.offsetHeight
  110.             let schX = imgsorech.offsetLeft
  111.             let schY = imgsorech.offsetTop
  112.             let maxwidth = imgbox.clientWidth - schX - 2
  113.             let maxheight = imgbox.clientHeight - schY - 2
  114.             imgsorech.style.bottom = ''
  115.             imgsorech.style.right = ''
  116.             imgsorech.style.left = schX + 'px'
  117.             imgsorech.style.top = schY + 'px'
  118.             document.onmousemove = function (eve) {
  119.                 eve = eve || window.event
  120.                 let miraiX = eve.clientX
  121.                 let miraiY = eve.clientY
  122.                 let schwidth = imawidth + (miraiX - imaX)
  123.                 let schheight = imaheight + (miraiY - imaY)
  124.                 schwidth = Math.min(schwidth, maxwidth)
  125.                 schwidth = Math.max(schwidth, minwidth)
  126.                 schheight = Math.min(schheight, maxheight)
  127.                 schheight = Math.max(schheight, minheight)
  128.                 let seihoukeiSize = Math.min(schwidth, schheight)
  129.                 imgsorech.style.width = seihoukeiSize + 'px'
  130.                 imgsorech.style.height = seihoukeiSize + 'px'
  131.                 return false
  132.             }
  133.         }

  135.         hibarikami.onmousedown = function (eve) {  //左上角
  136.             eve = eve || window.event
  137.             if (eve.stopPropagation) {
  138.                 eve.stopPropagation()
  139.             } else {
  140.                 eve.cancelBubble = true
  141.             }
  142.             let imaX = eve.clientX
  143.             let imaY = eve.clientY
  144.             let imawidth = imgsorech.offsetWidth
  145.             let imaheight = imgsorech.offsetHeight
  146.             let schX = imgbox.clientWidth - imawidth - imgsorech.offsetLeft
  147.             let schY = imgbox.clientHeight - imaheight - imgsorech.offsetTop
  148.             let maxwidth = imgbox.clientWidth - schX - 2
  149.             let maxheight = imgbox.clientHeight - schY - 2
  150.             imgsorech.style.left = ''
  151.             imgsorech.style.top = ''
  152.             imgsorech.style.right = schX + 'px'
  153.             imgsorech.style.bottom = schY + 'px'
  154.             document.onmousemove = function (eve) {
  155.                 let miraiX = eve.clientX
  156.                 let miraiY = eve.clientY
  157.                 let schwidth = imawidth - (miraiX - imaX)
  158.                 let schheight = imaheight - (miraiY - imaY)
  159.                 schwidth = Math.min(schwidth, maxwidth)
  160.                 schwidth = Math.max(schwidth, minwidth)
  161.                 schheight = Math.min(schheight, maxheight)
  162.                 schheight = Math.max(schheight, minheight)
  163.                 let seihoukeiSize = Math.min(schwidth, schheight)
  164.                 imgsorech.style.width = seihoukeiSize + 'px'
  165.                 imgsorech.style.height = seihoukeiSize + 'px'
  166.                 return false
  167.             }
  168.         }

  170.         migikami.onmousedown = function (eve) { //右上角
  171.             eve = eve || window.event
  172.             if (eve.stopPropagation) {
  173.                 eve.stopPropagation()
  174.             } else {
  175.                 eve.cancelBubble = true
  176.             }
  177.             let imaX = eve.clientX
  178.             let imaY = eve.clientY
  179.             let imawidth = imgsorech.offsetWidth
  180.             let imaheight = imgsorech.offsetHeight
  181.             let schX = imgsorech.offsetLeft
  182.             let schY = imgbox.clientHeight - imaheight - imgsorech.offsetTop
  183.             let maxwidth = imgbox.clientWidth - schX - 2
  184.             let maxheight = imgbox.clientHeight - schY - 2
  185.             imgsorech.style.right = ''
  186.             imgsorech.style.top = ''
  187.             imgsorech.style.left = schX + 'px'
  188.             imgsorech.style.bottom = schY + 'px'
  189.             document.onmousemove = function (eve) {
  190.                 let miraiX = eve.clientX
  191.                 let miraiY = eve.clientY
  192.                 let schwidth = imawidth + (miraiX - imaX)
  193.                 let schheight = imaheight - (miraiY - imaY)
  194.                 schwidth = Math.min(schwidth, maxwidth)
  195.                 schwidth = Math.max(schwidth, minwidth)
  196.                 schheight = Math.min(schheight, maxheight)
  197.                 schheight = Math.max(schheight, minheight)
  198.                 let seihoukeiSize = Math.min(schwidth, schheight)
  199.                 imgsorech.style.width = seihoukeiSize + 'px'
  200.                 imgsorech.style.height = seihoukeiSize + 'px'
  201.                 return false
  202.             }
  203.         }

  205.         hibarishita.onmousedown = function (eve) { //左下角
  206.             eve = eve || window.event
  207.             if (eve.stopPropagation) {
  208.                 eve.stopPropagation()
  209.             } else {
  210.                 eve.cancelBubble = true
  211.             }
  212.             let imaX = eve.clientX
  213.             let imaY = eve.clientY
  214.             let imawidth = imgsorech.offsetWidth
  215.             let imaheight = imgsorech.offsetHeight
  216.             let schX = imgbox.clientWidth - imawidth - imgsorech.offsetLeft
  217.             let schY = imgsorech.offsetTop
  218.             let maxwidth = imgbox.clientWidth - schX - 2
  219.             let maxheight = imgbox.clientHeight - schY - 2
  220.             imgsorech.style.left = ''
  221.             imgsorech.style.bottom = ''
  222.             imgsorech.style.right = schX + 'px'
  223.             imgsorech.style.top = schY + 'px'
  224.             document.onmousemove = function (eve) {
  225.                 let miraiX = eve.clientX
  226.                 let miraiY = eve.clientY
  227.                 let schwidth = imawidth - (miraiX - imaX)
  228.                 let schheight = imaheight + (miraiY - imaY)
  229.                 schwidth = Math.min(schwidth, maxwidth)
  230.                 schwidth = Math.max(schwidth, minwidth)
  231.                 schheight = Math.min(schheight, maxheight)
  232.                 schheight = Math.max(schheight, minheight)
  233.                 let seihoukeiSize = Math.min(schwidth, schheight)
  234.                 imgsorech.style.width = seihoukeiSize + 'px'
  235.                 imgsorech.style.height = seihoukeiSize + 'px'
  236.                 return false
  237.             }
  238.         }
  239.     }
  240. </script>
  241. <div id="imgbox">
  242.     <div id="imgsorech">
  243.         <div id="ennSeiyaku">
  244.         </div>
  245.         <div id="migishita" class="muki">
  246.         </div>
  247.         <div id="hibarikami" class="muki">
  248.         </div>
  249.         <div id="migikami" class="muki">
  250.         </div>
  251.         <div id="hibarishita" class="muki">
  252.         </div>
  253.     </div>
  254. </div>
复制代码
小甲鱼最新课程 -> https://ilovefishc.com
回复 支持 反对

使用道具 举报

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

谢谢
小甲鱼最新课程 -> https://ilovefishc.com
回复 支持 反对

使用道具 举报

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

本版积分规则

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

GMT+8, 2025-4-19 15:44

Powered by Discuz! X3.4

© 2001-2023 Discuz! Team.

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