今天做项目用到了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. 【代码学习】PHP文件的上传和下载

    ===================== 文件上传和下载 ===================== 一.php.ini的配置信息 file_uploads = On /Off    是否允许文件上 ...

  2. CI Weekly #18 | flow.ci iOS 最佳实践出炉，正式支持 Git@OSC 构建

    如大家所期待,flow.ci 现已支持开源中国的代码仓库 - 码云,可以直接构建 Git@OSC 的项目了,点击创建项目-选择代码仓库-选择码云-绑定 OSChina 账户-选择要构建项目,教程看这里 ...

  3. Mysql net start mysql启动,提示发生系统错误 5 拒绝访问,原因所在以及解决办法

    1,Mysql net start mysql启动,提示发生系统错误 5 拒绝访问 在dos下运行net  start MySQL 不能启动mysql!提示发生系统错误 5:拒绝访问!切换到管理员模式 ...

  4. Android学习资料整理

    1.官方网站 http://developer.android.com/index.html http://android-developers.blogspot.com/ 2.Android Des ...

  5. Ext JS 实现建议词模糊动态搜索功能

    代码: new Ext.form.ComboBox({ store: new Ext.data.JsonStore({ idProperty: 'VehicleNo', url: '../ajax/t ...

  6. 回答集编程背景（Answer Set Programming）

    毕业设计跟的导师是研究计算机理论的,花了三个月学习符号逻辑,试图优化一个回答集程序的求解器(Answer set solver).比起眼花缭乱的前端框架和热闹的社区讨论,符号逻辑就是一个挺小众的数学领 ...

  7. 并发容器之CopyOnWriteArrayList（转载）

    Copy-On-Write简称COW,是一种用于程序设计中的优化策略.其基本思路是,从一开始大家都在共享同一个内容,当某个人想要修改这 个内容的时候,才会真正把内容Copy出去形成一个新的内容然后再改 ...

  8. String深度解析

    文章出处:http://my.oschina.net/xiaohui249/blog/170013 一.引题 String类型是比较特殊的一种类型,同时也是面试经常被问到的一个知识点,本文结合java ...

  9. selenium基础框架的封装(Python版)

    一.常用函数的封装 在使用selenium做web自动化测试的过程中,经常会碰到各种各样的问题,比如: 1.页面加载比较慢时,selenium查找元素抛出异常,导致脚本运行中止 2.写完脚本后发现代码 ...

  10. Java 多线程详解（二）------如何创建进程和线程

    Java 多线程详解(一)------概念的引入:http://www.cnblogs.com/ysocean/p/6882988.html 在上一篇博客中,我们已经介绍了并发和并行的区别,以及进程和 ...