js中的事件对象event （获取元素的,x,y坐标）

event的使用获取元素的,x,y坐标

如图所示

当鼠标放在上面那个框上时获取其坐标，并且在下面框中显示
其实需要使用到鼠标移动事件 onmousemove
event 事件对象中封装了当前事项相关的一切属性如鼠标的坐标键盘的按键

<script type="text/javascript">window.onload = function(){var big = document.getElementById("big");var small = document.getElementById("small");big.onmousemove = function(event){var x = event.clientX;var y = event.clientY;small.innerHTML = "x = " + x +", y = " + y;}}</script>

这种方法在ie8及一下无法使用
原因是在ie8中不支持event的使用

<script type="text/javascript">window.onload = function(){var big = document.getElementById("big");var small = document.getElementById("small");big.onmousemove = function(event){event = event || window.event;var x = event.clientX;var y = event.clientY;small.innerHTML = "x = " + x +", y = " + y;}}</script>

这样就兼容各种主流浏览器了

下面是整体代码预览图

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><style type="text/css">#big{width: 400px;height: 80px;border: 2px solid black;}#small{margin-top: 20px;width: 400px;height: 30px;border: 2px solid black;}</style><!-- 事件对象中封装了当前事项相关的一切属性如鼠标的坐标键盘的按键 --><script type="text/javascript">window.onload = function(){var big = document.getElementById("big");var small = document.getElementById("small");big.onmousemove = function(event){event = event || window.event;var x = event.clientX;var y = event.clientY;small.innerHTML = "x = " + x +", y = " + y;}}</script></head><body><div id="big"></div><div id="small"></div></body>
</html>

js中的事件对象event （获取元素的,x,y坐标）相关推荐

javaScript中的事件对象event是怎样
事件对象event,每当一个事件被触发的时候,就会随之产恒一个事件对象event,该对象中主要包含了关于该事件的基本属性,事件类型type(click.dbclick等值).目标元素target(我的 ...
JS中，日期对象（获取当前现在的年份，星期，时间）
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
JS基础--函数与BOM、DOM操作、JS中的事件以及内置对象
前言絮叨絮叨这里是JS基础知识集中讲解的第三篇,也是最后一篇,三篇JS的基础,大多是知识的罗列,并没有涉及更难得东西,干货满满!看完这一篇后,相信许多正在像我一样正处于初级阶段的同学, ...
js的三大家族(offset/scroll/client)和一个事件对象(event)///正则
一 offset 第1章 offset家族 4 1.1 三大家族和一个事件对象 4 1.2 Offset家族简介 4 1.2.1 offsetWidth和offsetHi ...
js进阶课程 12-9 jquery的事件对象event的方法有哪些？
js进阶课程 12-9 jquery的事件对象event的方法有哪些? 一.总结一句话总结:三组六个,阻止默认事件一组,阻止冒泡一组,阻止冒泡和剩余事件一组. 1.事件的默认动作指什么? 比如点a标 ...
JS事件对象 (event)
#事件对象 (event) div.onclick = function(event){ console.log(event); let e = event||wind ...
【JS笔记】JS中的DOM对象以及通过JS获取DOM结点，操作DOM属性、DOM增删改查
这篇文章,主要介绍JS中的DOM对象以及通过JS获取DOM结点,操作DOM属性.DOM增删改查. 目录一.JS中的DOM 1.1.什么是DOM 1.2.获取DOM结点 (1)获取htm ...
js中直接通过id名获取到这个元素
浏览器日常bug: 最近在复习javascript的时候发现了一个我还没有见过的一个有趣的东西,可能你也没有见过,所以就在这里记录一下:就是js中直接通过id名获取到这个元素,且不使用getEleme ...
JavaScript：事件对象Event和冒泡
本文最初发表于博客园,并在GitHub上持续更新前端的系列文章.欢迎在GitHub上关注我,一起入门和进阶前端. 以下是正文. 绑定事件的两种方式我们在上一篇文章 DOM操作详解中已经讲过事件的概 ...

js中的事件对象event （获取元素的,x,y坐标）

event的使用获取元素的,x,y坐标

js中的事件对象event （获取元素的,x,y坐标）相关推荐

最新文章

热门文章

js中的事件对象event （获取元素的,x,y坐标）

event的使用 获取元素的,x,y坐标

js中的事件对象event （获取元素的,x,y坐标）相关推荐

最新文章

热门文章

event的使用获取元素的,x,y坐标