获取html div元素的位置 vue js tootip

78 篇文章 2 订阅
52 篇文章 1 订阅
//获取元素的纵坐标(相对于窗口)
function getTop(e) {
    // e 是HTML元素输出如下图;
    console.log(e);
    // var offset = e.offsetTop - e.scrollTop;
    // if (e.offsetParent != null) offset += getTop(e.offsetParent);
    let Y = e.getBoundingClientRect().top + 75;
    return Y;
}
//获取元素的横坐标(相对于窗口)
function getLeft(e) {
    let X = e.getBoundingClientRect().left;
    // var offset = e.offsetLeft - e.scrollLeft;
    // if (e.offsetParent != null) offset += getLeft(e.offsetParent);
    return X;
}

在这里插入图片描述

  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
要在Vue获取`div`元素的光标位置,可以使用`Selection`对象和`Range`对象。下面是一个示例: 首先,在Vue组件的模板中,给`div`元素添加一个`ref`属性: ```html <template> <div ref="myDiv" contenteditable="true" @mouseup="handleMouseUp"></div> </template> ``` 然后,在Vue组件的方法中,定义一个`handleMouseUp`方法来处理鼠标抬起事件。在该方法中,可以通过`window.getSelection()`获取光标的位置,并使用`Range`对象获取光标相对于`div`元素的偏移量: ```javascript <script> export default { methods: { handleMouseUp() { const selection = window.getSelection(); const range = selection.getRangeAt(0); const divOffset = this.$refs.myDiv.getBoundingClientRect(); const { top, left } = range.getBoundingClientRect(); const cursorOffset = { top: top - divOffset.top, left: left - divOffset.left }; console.log('光标位置:', cursorOffset); } } } </script> ``` 在上述示例中,当鼠标在`div`元素上抬起时,会触发`handleMouseUp`方法。该方法获取当前光标位置的`Range`对象,并计算光标相对于`div`元素的偏移量。最后,将光标位置输出到控制台。 请注意,上述示例仅适用于在鼠标抬起时获取光标位置。如果需要实时追踪光标位置的变化,可能需要在其他事件(如键盘事件、鼠标移动事件)中监听并更新光标位置。另外,还需要考虑光标在不同元素之间移动时的情况。 如果需要在特定的时机获取光标位置,可以根据具体需求调整事件和方法的绑定方式。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值