<script>
function dclick() {
form1.text.value = "您双击了页面!";
}

function Click() {
form1.text.value += "您单击了页面";
}

function down() {
form1.text.value = "您按下了鼠标";
}

function up() {
form1.text.value = "您释放了鼠标"
}
</script>
</head>

<body ondblclick="dclick()" onmousedown="down()" onmouseup="up()" onclick="click()">
<form action="" id="form1" name="form1" method="post">
<label>
<textarea name="text" cols="50" rows="2"></textarea>
</label>
</form>
</body>
<!DOCTYPE html>
<html>
<head>
<script>
function myFunction(e)
{
x=e.clientX;
y=e.clientY;
coor="Coordinates: (" + x + "," + y + ")";
document.getElementById("demo").innerHTML=coor
}
function clearCoor()
{
document.getElementById("demo").innerHTML="";
}
</script>
</head>
<body style="margin:0px;">
<div id="coordiv" style="width:199px;height:99px;border:1px solid" 
onmousemove="myFunction(event)" onmouseout="clearCoor()"></div>
<p>Mouse over the rectangle above, 
and get the coordinates of your mouse pointer.</p>
<p id="demo"></p>
</body>
</html>

您大概感兴趣的篇章:

  • js完结获取div坐标的主意
  • javascript获得文档坐标和视口坐标
  • javascript实时收获鼠标坐标值并出示的不二秘技
  • js使用onmousemove和onmouseout获取鼠标坐标的法子
  • JS网页在线获取鼠标坐标值的点子
  • javascript获得当前鼠标坐标的议程
  • JavaScript获取鼠标移动时的坐标(包容IE8、chome谷歌(Google)、Firefox)
  • JS
    onmousemove鼠标移动坐标接龙DIV效果实例
  • js鼠标及对象坐标调整属性详细解析
  • JavaScript获得对象在页面中地方坐标的秘技

JavaScript获取鼠标移动时的坐标(包容:IE8、Google、Firefox、Opera
),测量检验通过

javascript落到实处判别鼠标的情形

下边包车型客车js代码演示了onmousemove和onmouseout事件的用法,鼠标在内定区域内移动时会动态彰显鼠标坐标音信

var EventUtil = {
  addHandler:function(elem,type,handler){
    if(elem.addEventListener)
    {
      elem.addEventListener(type,handler,false);
    }else if(elem.attachEvent)
    {
      elem.attachEvent("on"+type,handler);
    }else
    {
      elem["on"+type]=handler;
    }
  },
  removeHandler:function(elem,type,handler){
    if(elem.removeEventListener)
    {
      elem.removeEventListener(type,handler,false);
    }else if(elem.detachEvent)
    {
      elem.detachEvent("on"+type,handler);
    }else
    {
      elem["on"+type]=null;
    }
  },
  getEvent:function(event){
    return event?event:window.event;
  },
  getTarget:function(event){
    return event.target||event.srcElement;
  },
  preventDefault:function(event){
    if(event,preventDefault){
      event.preventDefault();
    }else{
      event.returnValue = false;
    }
  },
  stopPropagation:function(event){
    if(event.stopPropagation){
      event.stopPropagation();
    }else{
      event.cancelBubble=true;
    }
  }
};

你可能感兴趣的小说:

  • js与jquery中取稳妥前鼠标的x、y坐标地方的代码
  • js 获取坐标
    通过JS获得当前标准(鼠标)的坐标属性
  • 基于JavaScript达成获取鼠标点击地方坐标的法门
  • JavaScript获取鼠标坐标的函数(包容IE、Fire福克斯、Chrome)
  • js得到鼠标的坐标值的方式
  • 透过百度地图获取公交线路的站点坐标的js代码
  • javascript 事件目标坐标事件作证
  • js Event对象的5种坐标
  • 由此JS 获取Mouse
    Position(鼠标坐标)的代码
  • JavaScript兑现二维坐标点排序效果

上述所述正是本文的全体内容了,希望大家可以欣赏。

期待本文所述对大家的javascript程序设计具备协助。

var div = document.getElementById("myDiv");
EventUtil(div,"click",function(event){
   event = EventUtil.getEvent(event);
   var pageX = event.pageX;
   var pageY = event.pageY;
   if(pageX==undefined)
  {
     pageX=event.clientX+document.body.scrollLeft||document.documentElement.scrollLeft;
  }
   if(pageY==undefined)
   {
     pageY = event.clientY+document.body.scrollTop||document.documentElement.scrollTop;
   }
   alert("Page coordinates: "+pageX+","+pageY);
});

为便于咱们测量检验特别准予备了一份在线演示

你可能感兴趣的篇章:

  • javascript 鼠标事件下结论
  • JavaScript获取鼠标坐标的函数(包容IE、Fire福克斯、Chrome)
  • 基于JavaScript实现获取鼠标点击地方坐标的措施
  • javascript监听鼠标滚轮事件浅析
  • 深远商量JavaScript、JQuery屏蔽网页鼠标右键菜单及禁止采用复制
  • javascript获得当前鼠标坐标的主意
  • javascript达成百度地图鼠标滑动事件展现、遮掩
  • javascript贯彻图片跟随鼠标移动作效果果的不二等秘书诀

您只怕感兴趣的小说:

  • JS获取鼠标坐标地方实例分析
  • js达成获取div坐标的法门
  • javascript得到文书档案坐标和视口坐标
  • javascript实时获得鼠标坐标值并出示的格局
  • JS网页在线获取鼠标坐标值的法子
  • javascript得到当前鼠标坐标的点子
  • JavaScript获取鼠标移动时的坐标(包容IE8、chomeGoogle、Firefox)
  • JS
    onmousemove鼠标移动坐标接龙DIV效果实例
  • js鼠标及对象坐标调节属性详细分析
  • JavaScript得到对象在页面中位置坐标的办法

2.显示屏坐标地方

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<title>JavaScript获取鼠标移动时的坐标(兼容:IE8、谷歌、Firefox、Opera)_脚本之家</title> 
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 
<style type="text/css"> 
.tip { 
width:200px; 
border:2px solid #ddd; 
padding:8px; 
background:#f1f1f1; 
color:#666; 
} 
</style> 
<script type="text/javascript"> 

//方法1 
function mousePos(e){ 
  var x,y; 
  var e = e||window.event; 
  return { 
    x:e.clientX+document.body.scrollLeft + document.documentElement.scrollLeft, 
    y:e.clientY+document.body.scrollTop + document.documentElement.scrollTop 
  }; 
}; 

//方法2 
//Firefox支持属性pageX,与pageY属性,这两个属性已经把页面滚动计算在内了, 
//在Chrome可以通过document.body.scrollLeft,document.body.scrollTop计算出页面滚动位移, 
//而在IE下可以通过document.documentElement.scrollLeft ,document.documentElement.scrollTop 
function getMousePos(event) { 
      var e = event || window.event; 
      var scrollX = document.documentElement.scrollLeft || document.body.scrollLeft; 
      var scrollY = document.documentElement.scrollTop || document.body.scrollTop; 
      var x = e.pageX || e.clientX + scrollX; 
      var y = e.pageY || e.clientY + scrollY; 
      //alert('x: ' + x + '\ny: ' + y); 
      return { 'x': x, 'y': y }; 
    } 

function test(e){ 
document.getElementById("mjs").innerHTML = getMousePos(e).x+','+getMousePos(e).y;   
}; 
</script> 
</head> 
<body> 
<div id="mjs" class="tip">获取鼠标点击位置坐标</div> 
<div id="test" style="width:1000px;height:1000px;background:#ccc;" onmousemove="test(event)"></div> 
</body> 
</html>
admin

相关文章

发表评论

电子邮件地址不会被公开。 必填项已用*标注