今天做项目用到了event.clientX和event.clientY,给元素定位，用定位的时候，让top和left等于事件元素的的坐标

<!DOCTYPE html>

<html>

	<head>

		<meta charset="UTF-8">

		<title>javascript的动态显示</title>

		<style>

			a{

				display:block;

				height:50px;

				width:50px;

			}

		</style>

	</head>

	<body>

		<a href="http://www.baidu.com" title="baidu">百度</a>

		<a href="http://www.baidu.com" title="baidu">百度</a>

		<a href="http://www.baidu.com" title="baidu">百度</a>

		<a href="http://www.baidu.com" title="baidu">百度</a>

		<script>

			(function(){

				var as=document.getElementsByTagName("a");

				for(var i=0;i<as.length;i++){

					as[i].onmouseover=mouseover;

				}

				function mouseover(){

					var div=document.createElement("div");

					div.style.position="absolute";

					console.log(window.event.clientY);

					div.style.top=window.event.clientY+'px';

					console.log(div.style.top);

					div.style.left=window.event.clientX+'px';

					div.innerHTML="链接到百度";

					document.body.appendChild(div);

				}

			})(window);

		</script>

	</body>

</html>

　　正确写法是：div.style.left=window.event.clientX+'px';要加上单位就可以了，刚开始不加单位，打印不出来任何东西，加上单位打印出坐标值

javascript中event.clientX和event.clientY用法的注意事项的更多相关文章

  1. event.clientX和event.clientY

    event.clientX.event.clientY 鼠标相对于浏览器窗口可视区域的X,Y坐标(窗口坐标),可视区域不包括工具栏和滚动条.IE事件和标准事件都定义了这2个属性 event.pageX ...

  2. javascript坐标：event.x、event.clientX、event.offsetX、event.screenX 用法

    clientX 设置或获取鼠标指针位置相对于窗口客户区域的 x 坐标,其中客户区域不包括窗口自身的控件和滚动条. clientY 设置或获取鼠标指针位置相对于窗口客户区域的 y 坐标,其中客户区域不包 ...

  3. javaScript中的事件对象event

    事件对象event,每当一个事件被触发的时候,就会随之产恒一个事件对象event,该对象中主要包括了关于该事件的基本属性,事件类型type(click.dbclick等值).目标元素target(我的 ...

  4. javaScript中的事件对象event是怎样

    事件对象event,每当一个事件被触发的时候,就会随之产恒一个事件对象event,该对象中主要包含了关于该事件的基本属性,事件类型type(click.dbclick等值).目标元素target(我的 ...

  5. JavaScript中instanceof与typeof运算符的用法及区别详细解析

    JavaScript中的instanceof和typeof常被用来判断一个变量是什么类型的(实例),但它们的使用还是有区别的: typeof 运算符 返回一个用来表示表达式的数据类型的字符串. typ ...

  6. javascript中的常用表单事件用法

    下面介绍几种javascript中常用的表单事件: 一,onsubmit:表单中的确认按钮被点击时发生的事件,如下案例. 案例解析:弹出表单中提交的内容 <form name="tes ...

  7. javascript 中Array.prototype.sort 函数的用法

    来源:http://www.jb51.net/article/5769.htm JavaScript中对变量的操作都是通过引用方式,而对数组也一样. 前两天想要对一个数组进行复制,一直苦于找不到办法( ...

  8. 全面理解JavaScript中的闭包的含义及用法

    1.什么是闭包 闭包:闭包就是能够读取其他函数内部变量的函数;闭包简单理解成“定义在一个函数内部的函数”. 闭包的形式:即内部函数能够使用它所在级别的外部函数的参数,属性或者内部函数等,并且能在包含它 ...

  9. javascript中的2个感叹号的用法

    !!是逻辑"非非",即是在逻辑"非"的基础上再"非"一次.通过!或!!可以将很多类型转换成bool类型,再做其它判断.     应用场景:判 ...

随机推荐

  1. 随应潮流-基于ABP+Angulsrjs现代化应用软件开发框架(2)-abp说明

    前言 上周未发布完<基于ABP+Angulsrjs现代化应用软件开发框架(1)-总体介绍> 文章后,好多朋友问了我一些ABP的问题,并且希望我开源我的项目源码,向朋友们说一下,我项目的源码 ...

  2. CODEVS上一道很有趣的题（2145 判断奇偶性）

    判断函数y=x^n次方的奇偶性若是奇函数就输出ji,偶函数输出ou 233333 用到了long long 还是爆了,于是就上了char a[1000000] =.= #include<stdi ...

  3. SQL*Plus快速入门

    连接数据库sqlplus hr@\"//mymachine.mydomain:port/MYDB\" --连接到MYDB数据库的一个HR数据集里sqlplus hr@MYDB -- ...

  4. 对游览器遭到劫持的处理方案（RemoveAds Not By This Site）

    近期游览器一直被劫持 :火狐用不了,ie出毛病了,谷歌游览器也不好使了,已经快被逼疯!!! 但是事情总是向着美好的方向发展的么! 接下来就和大家一起分享一下我的解决经验! 首先用360杀毒(虽然大多数 ...

  5. Python之打印99乘法表

    本脚本实现打印99乘法表 #!/usr/bin/python #9*9 for i in range(1,10): print for j in range(1,i+1): print "% ...

  6. Java常见快捷键

    1.Alt+/ 补充代码 2.shift+d 删除选中代码同时删除空格 3.shift+alt+R 改变所有与选中部分相同的字符串 4.ctrl+S 保存代码 5.ctrl+shift+F 格式化代码 ...

  7. c++ STL stack & queue

    Stack 主要的方法有如下: empty() 堆栈为空则返回真                  pop() 移除栈顶元素(不会返回栈顶元素的值)                  push() 在 ...

  8. Kafka学习-Producer和Customer

    在上一篇kafka入门的基础之上,本篇主要介绍Kafka的生产者和消费者. Kafka 生产者 kafka Producer发布消息记录到Kakfa集群.生产者是线程安全的,可以在多个线程之间共享生产 ...

  9. Jdk1.6 JUC源码解析(13)-LinkedBlockingQueue

    功能简介: LinkedBlockingQueue是一种基于单向链表实现的有界的(可选的,不指定默认int最大值)阻塞队列.队列中的元素遵循先入先出 (FIFO)的规则.新元素插入到队列的尾部,从队列 ...

  10. 云计算之路-阿里云上：攻击又来了，4个IP分别遭遇超过30G的流量攻击

    继5月13日下午被攻击之后,今天下午,攻击又肆无忌惮地来了,14:35.14:39.14:40.14:41 ,依次有4个IP遭遇超过30G的流量攻击,被阿里云“云盾”关进“黑洞”,造成被攻击IP上的站 ...