今天做项目用到了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. python2与python3的不兼容_urllib2

    网页下载器:将URL对应的网页以HTML下载到本地,用于后续分析 常见网页下载器:Python官方基础模块:urllib2 第三方功能包:requests python 3.x中urllib库和uri ...

  2. 详细解剖大型H5单页面应用的核心技术点

    项目 Xut.js 阐述下开发中一个比较核心的优化技术点,这是一套平台代码,并非某一个插件功能或者框架可以直接拿来使用,核心代码大概是6万行左右(不包含任何插件) .这也并非一个开源项目,不能商业使用 ...

  3. 在Android Studio上测试运行，Unity发布成Android包的环境搭建步骤

      我用的是unity5.4.3版本,jdk是1.8.0_131版本,Android-SDK是r24.4.1版本,Android-NDK是r13b版本,作者是刚开始写博客,希望对在unity摸索的人有 ...

  4. 1018 Big Number

    Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others)Total Submission( ...

  5. SVN常见问题总结一

    注意 转载须保留原文链接(http://www.cnblogs.com/wzhiq896/p/6828776.html  ) 作者:wangwen896 SVN是Subversion的简称,是一个开放 ...

  6. Centos6.5静默安装Oracle11g

    sed -i "s/SELINUX=enforcing/SELINUX=disabled/" /etc/selinux/configsetenforce 0yum -y insta ...

  7. hdu2571 命运 简单DP

    简单dp 状态方程很好想,主要是初始化.... 代码: #include<iostream> #include<cstdlib> #include<cstdio> ...

  8. 第三章 霍夫变换(Hough Transform)

    主要内容: 霍夫变换的作用 霍夫变换检测直线的原理 霍夫变换检测圆的原理 OpenCV中的霍夫变换 1.霍夫变换检测直线原理 霍夫变换,英文名称Hough Transform,作用是用来检测图像中的直 ...

  9. 点击文字选中checkbox

    <html> <head> <title>test</title> <meta http-equiv="content-Type&quo ...

  10. SpringData系列二 Repository接口

    本节主要介绍Repository接口规范,及其子接口 Repository是一个空接口,即标准接口 若我们定义的接口继承了Repository,则该接口会被IOC容器识别为一个Repositoty B ...