鼠标位置与元素定位-优快云博客

本文探讨了使用clientX等鼠标位置进行元素定位时的问题及解决方案，对比了position:absolute与position:fixed的区别，并解决了使用jQuery获取元素宽度返回null及css()方法设置元素位置无效的问题。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

根据clientX等鼠标位置对元素进行定位使用absolute会发生变化

项目： 《os>
时间： 2018年7月30日
问题： 根据clientX等鼠标位置对元素进行定位使用了absolute，导致当屏幕大小（或文档长宽）发生变化时，位置也会发生变化
分析： 此处一开始用position定位，但position:absolute是根据设置了relative的父元素进行定位的，所以当屏幕大小（如果存在滚动内容，absolute是根据父元素进行定位）发生变化时，位置也会发生变化
浏览器窗口可视区域的X，Y坐标（窗口坐标），可视区域不包括工具栏和滚动条，而position:fixed属性也是设置元素在当前可视窗口的位置，所以如果想根据鼠标位置定位元素应当使用fixed属性

使用$(selector).width()获取元素宽度结果是null

项目： 《os》
时间： 2018年7月30日
问题： 使用$(selector).width()获取元素宽度结果是null
分析： 在获取文字提示框之前，一开始尝试设置好appendHtml后直接获取元素宽度，但这样获取的width值为null,这是因为找不到要获取宽度的元素，即找不到.box元素，因为还没有添加到Html中……
解决办法： 在append语句后再获取元素宽度然后重新给元素赋值
正确代码： 
  $('body').append(appendHtml)
  var w = $('.box').outerWidth()

使用css()方法给元素重新加left和top值时不起作用

项目： 《os>
时间： 2018年7月30日
问题： 使用css()方法给元素重新加left和top值时不起作用
分析： 一开始我以为是不能使用css()方法为元素定位时的left和top赋值，后来打印发现left是'NANpx',是因为我使用了之前设置的x值直接进行加减的运算，但x值是我经过字符串拼接后的值……
解决办法： 直接使用clientX值
问题代码： 
  var x = oEvent.clientX - 50 + 'px'
  var w = $('.box').outerWidth()
    var x1 = x - w / 2 + 'px' // x1值为NANpx
    $('.tip').css({
      'position': 'fixed',
      'left': x1,
      'top': y,
      'z-index': 9000,
    })