计算鼠标的按下、移动、抬起的位置 vue

最新推荐文章于 2023-10-10 13:48:30 发布

Ideaing~

最新推荐文章于 2023-10-10 13:48:30 发布

阅读量2.4k

点赞数 1

文章标签：鼠标事件 vue.js

本文链接：https://blog.csdn.net/L_csdn123/article/details/124382350

版权

这篇博客详细介绍了如何使用HTML和JavaScript来实现在网页中选中文字后，动态显示与选中内容相对应的提示弹出框。通过监听鼠标按下、移动和抬起事件，结合CSS定位，实现了弹窗随着选中文本位置的变化而变化。同时，文中提到了计算提示框位置的一些技巧和注意事项。

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

情景：当我用鼠标选中一段文字后，会提示一个提示弹出框，那这个弹出框的位置就和选中的文字的位置有相应的关系。

html:
<div 
     class="content"
     @mousedown.stop="getMouseDown"
     @mousemove.stop="moveFlag && getMouseMove($event)"			
     @mouseup.stop="getMouseUp"
>内容</div>
<span v-if="isShow" class="warn">提示</span>
js:
<script>
data() {
	return {
		moveFlag :false,		// 这个moveFlag是个标志，如果鼠标没按下的时候鼠标移动事件是不触发的moveFlag为false，当鼠标按下的时候把moveFlag设为true，但是按下了不代表就选中了
		startPoint:{x:0,y:0}，	// 鼠标按下时的起始点
		endPoint:{x:0,y:0}，	// 鼠标抬起时的结束点
		text:'',	// 选中的内容
		isShow:false,	// 是否显示弹窗标志
		isMove:false,  // 鼠标是否移动
	}
}
methods:{
    // 鼠标按下
	getMouseDown() {
		this.text = ''				// 清空选择的内容初始化坐标
		this.isShow = false;
		this.startPoint.x = 0;
		this.startPoint.y = 0;
		this.endPoint.x = 0;
        this.endPoint.y = 0;				
        this.moveFlag = true
        let event;				// 浏览器事件记录起始位置
        event = event || window.event
        this.startPoint.x  = event.pageX
        this.startPoint.y = event.pageY;
	}，
	// 鼠标移动
	getMouseMove() {
		this.isMove = true
	},
	// 鼠标抬起 计算提示弹窗的位置
	getMouseupcoor() {
	  let event;
      event = event || window.event;
      this.endPoint.y = event.pageY;
      this.endPoint.x = event.pageX;
      let height = $(".content").offset().top			// 获取内容在当前页面的高度
      let width = $(".warn").width()/2
      let left = parseInt((this.startPoint.x - this.endPoint.x)/2)
      let numTop = this.endPoint.y - height/ 2
      let numLeft = this.endPoint.x - width + left - 150		// 这个提示框距左侧的距离这个大小是我自己测试计算出来的，并不是固定的公式，如果有好的方法可以传授给我。。。
      $(".content").css({
      left:numLeft,
      top:numTop
      })
      if(this.isMove) {
     	 this.text = window.getSelection().toString();
     	 this.isShow = true
      }else {
      	this.text = "";
        this.isShow = false
      }
	}
}

</script>