js获取鼠标点击事件的相对位置

Posted 2023-04-24

如图

我需要获取图片上点击事件相对于图片左上方原点(0,0)的位置，最好要能考虑到滚动条的影响的，谢谢了~
我是需要兼容浏览器的

如果要兼容浏览器，最好使用一个库来实现，用鼠标的页面位置减去图片的页面位置就行了。
比如jquery：
$(document).click(function(e)
alert("X: " + (e.pageX - $('img').offset().left) + ", Y: " + (e.pageY - $('top').offset().top));
); 参考技术A 发的根本

JS事件基础

JS事件基础

event对象和事件冒泡

什么是event对象

用来获取时间的详细信息：鼠标位置，键盘按键

例子：获取鼠标的位置：clientX鼠标点击横坐标；clientY鼠标点击纵坐标

document的本质：document.childNodes[0].tagName

? ——获取页面第一个子节点的值，是DOCTYPE。

事件流

事件冒泡

? 取消冒泡：oEvent.cancelBubble=true

? 例子：仿select控件

? DOM事件流

事件冒泡的含义：当事件发生后，这个事件就要开始传播，因为事件本身没有处理事件的能力，即处理时间的函数未绑定在该事件源上。

• 例子：仿select控件

window.onload=function(){
				var oDiv=document.getElementById(‘div1‘);
				var oBtn=document.getElementById(‘btn1‘);
				//点击按钮出现下拉框
				oBtn.onclick=function()
				{
					oDiv.style.display=‘block‘;
					//alert(‘按钮被点击了‘);
					
					//取消冒泡
					event.cancelBubble=true;
				}
				//点击界面其他部位下拉框消失
				document.onclick=function()
				{
					oDiv.style.display=‘none‘;
					//alert(‘document被点击了‘)
				}
			}

鼠标事件

鼠标位置

可视区位置：clientX,clientY

例子1：跟随鼠标的Div

? 消除滚动条的影响

? 滚动条的意义——可视区与页面顶部的距离

document.onmousemove=function()
			{
				var oDiv=document.getElementById(‘div1‘);
				var scrollTop=document.documentElement.scrollTop;
				oDiv.style.left=event.clientX+‘px‘;
				//加上scrollTop防止在拖动滚动条时，鼠标与div分开
				oDiv.style.top=event.clientY+scrollTop+‘px‘;
			};

注：但凡用到clientX和clientY时，一定要加上scrollLeft和scrollTop

获取鼠标在页面的绝对位置

封装函数

例子2：一串跟随鼠标的div

• 封装函数：获取鼠标在页面绝对位置

/*获取鼠标在页面绝对位置*/
			function getPos()
			{
				var scrollTop=document.documentElement.scrollTop;
				var scrollLeft=document.documentElement.scrollLeft;
				
				return {x:event.clientX+scrollLeft, y:event.clientY+scrollTop};
			}

• 例子2：一串跟随鼠标的div

function getPos()
			{
				var scrollTop=document.documentElement.scrollTop;
				var scrollLeft=document.documentElement.scrollLeft;
				
				return {x:event.clientX+scrollLeft, y:event.clientY+scrollTop};
			}
			
			document.onmousemove=function()
			{
				var aDiv=document.getElementsByTagName(‘div‘);
				var pos=getPos();
				
				for(var i=aDiv.length-1;i>0;i--)
				{
					//后面一个Div跟着前面一个Div走
					aDiv[i].style.left=aDiv[i-1].offsetLeft+‘px‘;
					aDiv[i].style.top=aDiv[i-1].offsetTop+‘px‘;
				}
				//第一个Div跟着鼠标走
				aDiv[0].style.left=pos.x+‘px‘;
				aDiv[0].style.top=pos.y+‘px‘;
			};

键盘事件

keyCode（返回按键值的ASCLL码，但FN键不反回值）

获取用户按下键盘的哪个按键

例子：键盘控制Div移动

document.onkeydown=function()
			{
				var oDiv=document.getElementById(‘div1‘);
				
				if(event.keyCode==37)
				{//左
					oDiv.style.left=oDiv.offsetLeft-10+‘px‘;
				};
				if(event.keyCode==38)
				{//上
					oDiv.style.top=oDiv.offsetTop-10+‘px‘;
				};
				if(event.keyCode==39)
				{//右
					oDiv.style.left=oDiv.offsetLeft+10+‘px‘;
				};
				if(event.keyCode==40)
				{//下
					oDiv.style.top=oDiv.offsetTop+10+‘px‘;
				};
			};

其他属性

ctrlKey，shiftKey，altKey 作用（判断ctrl，shift，alt有没有按下）

• 例子：提交留言

回车 提交

ctrl+回车 提交

			window.onload=function()
			{
				var oTxt1=document.getElementById(‘txt1‘);
				var oBtn=document.getElementById(‘btn1‘);
				var oTxt2=document.getElementById(‘txt2‘);
				
				oBtn.onclick=function()
				{
					oTxt2.value+=oTxt1.value+‘
‘;
					oTxt1.value=‘‘;
				};
				/*点击回车提交事件
				因为点击回车时，焦点在text文本框中，所以keydown是在text文本框上发生*/
				oTxt1.onkeydown=function()
				{
					//ctrl+回车 提交
					if(event.keyCode==13 && event.ctrlKey)
					{
						oTxt2.value+=oTxt1.value+‘
‘;
						oTxt1.value=‘‘;
					}
					//回车提交
					if(event.keyCode==13)
					{
						oTxt2.value+=oTxt1.value+‘
‘;
						oTxt1.value=‘‘;
					}
				};
			};