您的位置:首页> 前端教程> JS教程
文章导航

JavaScript event.clientX

2019-3-24 13:30| 作者: admin| 查看: 631| 评论: 0|来自: 蚂蚁部落

理解一个属性的功能可以从其名称入手,clientX属性也不例外。

此属性属于事件对象,可以在事件处理函数内部使用,更多内容参阅JavaScript 事件对象一章节。

clientX由client和x结合而成,client翻译成汉语具有客户区的意思,x则表示坐标系的x轴。

要彻底理解此属性,需要首先明确如下两个概念:

(1).client客户区。

(2).客户区的坐标系。

一.client客户区:

为了通俗易懂,我们可以用如下方式理解客户区。

所谓客户区,浏览器提供给浏览者(客户)查看网页内容的区域。

也就是浏览器实际展示网页内容的区域,不包括地址栏,标签栏或者状态栏等区域。

简单图示如下:

a:3:{s:3:\"pic\";s:43:\"portal/201903/24/132908hfnr58tfgy18rr11.jpg\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

上面是火狐浏览器下的一个界面,灰色区域就是浏览器客户区,只有这个区域才算是浏览器客户区。

也就是浏览器所真正呈现网页内容的区域,浏览器的标签栏和地址栏等都不是。

二.客户区坐标系:

客户区坐标系与传统意义上的数学坐标系有所差别。

原点位置在客户区的左上角,水平向左是x轴正方向,垂直向下是y轴正方向。

传统意义上的数学坐标系y轴垂直向上是正,恰好相反。

为了更好的理解,下面用比较粗陋的图示简单进行一下说明:

a:3:{s:3:\"pic\";s:43:\"portal/201903/24/133002h1q20ggr8q2g1z22.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

三.属性概念:

event.clientX属性返回鼠标指针在浏览器客户区x轴方向坐标。

返回值是一个数字不带单位,默认单位是像素。

与此属性相对应的是event.clientY,获取在客户区y轴的坐标,原理一模一样。

语法结构:

[JavaScript] 纯文本查看 复制代码
event.clientX

浏览器支持:

(1).IE浏览器支持此属性。

(2).edge浏览器支持此属性。

(3).火狐浏览器支持此属性。

(4).Opera浏览器支持此属性。

(5).谷歌浏览器支持此属性。

(6).safria浏览器支持此属性。

实例代码:

[HTML] 纯文本查看 复制代码运行代码
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>蚂蚁部落</title>
<style type="text/css">
body{
  height:1000px;
}
#ant{
  width:100px;
  height:100px;
  background-color:green;
  margin:50px;
}
span{margin-left:50px;}
</style>
<script>
window.onload=function(){
  let odiv = document.getElementById("ant");
  let ospan = document.getElementById("span");
  odiv.onmousemove = function(ev) {
    let event=ev||event; 
    ospan.innerHTML = "坐标值:X:" + event.clientX + " Y:" + event.clientY;
  }
}
</script>
</head>
<body>
<div id="ant"></div>
<span id="span"></span>
</body>
</html>

鼠标在绿色div中移动,会将其在客户区中的坐标写入span元素,简单代码说明如下:

为绿色div元素注册mousemove事件处理函数,当鼠标在此div中移动时,可以将鼠标指针的坐标写入span。

这里一定要注意的是,获取的坐标点是在客户区中的坐标位置,而不是在绿色div中的坐标位置。

代码比较简单,本文不再进行多余的介绍,更多内容可以参阅如下几篇文章:

(1).mousemove事件可以参阅JavaScript mousemove 事件一章节。

(2).innerHTML 属性参阅JavaScript innerHTML一章节。

(3)注册事件处理函数参阅JavaScript 注册事件处理函数一章节。.


鲜花

握手

雷人

路过

鸡蛋

最新评论

返回顶部