今天做项目用到了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. bzoj2884 albus就是要第一个出场

    Description 已知一个长度为n的正整数序列A(下标从1开始), 令 S = { x | 1 <= x <= n }, S 的幂集2^S定义为S 所有子集构成的集合.定义映射 f ...

  2. Laravel 5.2 教程 - 数据填充

    一.简介 Laravel提供的填充类(seed),可以让大家很容易的实现填充测试数据到数据库.所有的填充类都位于database/seeds目录.填充类的类名完全由你自定义,但最好还是遵循一定的规则, ...

  3. JS判断当前手机类型

    window.onload = function () { var u = navigator.userAgent; if (u.indexOf('Android') > -1 || u.ind ...

  4. vue组件（将页面公用的头部组件化）

    呃……重新捡起前面用vue-cli快速生成的项目. 之前是做过一个多页面的改造,以及引入vux的ui组件,这次在这个项目的基础上,再来聊聊vue中的component. 别问我为啥总是写关于vue的博 ...

  5. [.NET] 《Effective C#》快速笔记 - C# 高效编程要点补充

    <Effective C#>快速笔记 - C# 高效编程要点补充 目录 四十五.尽量减少装箱拆箱 四十六.为应用程序创建专门的异常类 四十七.使用强异常安全保证 四十八.尽量使用安全的代码 ...

  6. IOS打包相关问题

    使用了AFNetworking框架,模拟器和真机运行都不报错,但是提交商店报错Unsupported Architecture. Your executable contains unsupporte ...

  7. hadoop集群中删除原有jdk设置

    普通用户: sudo rpm -e --nodeps java-1.6.0-openjdk-1.6.0.0-1.50.1.11.5.el6_3.x86_64 tzdata-java-2012j-1.e ...

  8. Spring Boot 之构建Hello Word项目

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

  9. linux防火墙基本操作

    1.查看防火墙运行状态 # firewall-cmd --state 或者 # systemctl status firewalld.service .关闭防火墙 # systemctl stop f ...

  10. [笔记]ACM笔记 - 利用FFT求卷积（求多项式乘法）

    卷积 给定向量:, 向量和: 数量积(内积.点积): 卷积:,其中 例如: 卷积的最典型的应用就是多项式乘法(多项式乘法就是求卷积).以下就用多项式乘法来描述.举例卷积与DFT. 关于多项式 对于多项 ...