今天做项目用到了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. [uva11992]Fast Matrix Operations（多延迟标记，二维线段树，区间更新）

    题目链接:https://vjudge.net/problem/UVA-11992 题意:n*m的矩阵,每次对一个子矩阵操作,有三种操作:加x,设置为x,查询.查询返回子矩阵和.最小值.最大值 n很小 ...

  2. swoole使用 常用案例

    swoole使用 服务器及客户端 4种服务器[tcp/udp/web/websocket] TCP服务器 //创建Server对象,监听 127.0.0.1:9501端口 $serv = new sw ...

  3. poj1990树状数组

    Every year, Farmer John's N (1 <= N <= 20,000) cows attend "MooFest",a social gather ...

  4. Mac电脑使用Android Studio进行真机调试

    第一步: 为mac电脑配置 adb 命令的环境变量,分为2小步 1.找到 Android Studio 为你安装的 SDK : 打开电脑中 Android studio 的工具的软件,在启动 Andr ...

  5. ES6相关新特性介绍

    你可能已经听说过 ECMAScript 6 (简称 ES6)了.ES6 是 Javascript 的下一个版本,它有很多很棒的新特性.这些特性复杂程度各不相同,但对于简单的脚本和复杂的应用都很有用.在 ...

  6. JavaScript ,Python,java,C#,Go系列算法之【插入排序篇】

    常见的内部排序算法有:插入排序.希尔排序.选择排序.冒泡排序.归并排序.快速排序.堆排序.基数排序等.用一张图概括: 插入排序 插入排序(英语:Insertion Sort)是一种简单直观的排序算法. ...

  7. Spring Boot 之构建Hello Word项目

    1.创建一个maven项目 如下步骤: (第一步) (第二步) (第三步) 2.配置pom.xml文件 加载一些依赖包.字符集.指定jdk.编译插件. <project xmlns=" ...

  8. [刷题]算法竞赛入门经典 3-4/UVa455 3-5/UVa227 3-6/UVa232

    书上具体所有题目:http://pan.baidu.com/s/1hssH0KO 题目:算法竞赛入门经典 3-4/UVa455:Periodic Strings 代码: //UVa455 #inclu ...

  9. redis安装学习

    Redis是一个开源(BSD许可),内存存储的数据结构服务器,可用作数据库,高速缓存和消息队列代理.它支持字符串.哈希表.列表.集合.有序集合,位图,hyperloglogs等数据类型.内置复制.Lu ...

  10. Maven学习-Profile详解

    Profile能让你为一个特殊的环境自定义一个特殊的构建:profile使得不同环境间构建的可移植性成为可能.Maven中的profile是一组可选的配置,可以用来设置或者覆盖配置默认值.有了prof ...