JavaScript基础 event(For IE) 显示鼠标点击处的坐标值 距离窗口的距离 距离网页的距离 距离屏幕的距离

镇场诗:
    清心感悟智慧语,不着世间名与利。学水处下纳百川,舍尽贡高我慢意。
    学有小成返哺根,愿铸一良心博客。诚心于此写经验,愿见文者得启发。
——————————————————————————————————————————

code:

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <style type="text/css">
        .test{
            height:300px;
            width:300px;
            background-color:palevioletred;
        }
    </style>
	<script type="text/javascript">
	    //只能是IE用
	    //IE下,event是window对象的一个属性
        //什么时候 浏览器可以统一呀。

	    function GetXY()
	    {
	        alert(window.event.clientX + "," + window.event.clientY + "\n" + //距离窗口的距离
                  window.event.x + "," + window.event.y + "\n" +         //距离网页的距离,IE与火狐 不同
                  window.event.screenX + "," + window.event.screenY             //距离屏幕的距离
                );
	    }
	</script>
</head>
<body>
    <div class="test" onclick="GetXY()">
        <!--在这个div内 点击鼠标才会出现 弹窗,显示点击的坐标值-->
    </div>
</body>
</html>

result:

这个在火狐浏览器中实验就没有效果。换成IE后,出现如下结果:

——————————————————————————————————————————
博文的精髓,在技术部分,更在镇场一诗。IDE: VS2015;浏览器: IE。
html+css+js,强,值得努力学习。传智播客的视频教程是我的学习资源,推荐。
如果博文有可以改进的地方,请留下评论,我会认真思考的。

注:我是一位正在努力的普通人,此文仅供测试与参考使用,不可做其他用途。当参考博文内容时,代表您已接受使用条款。

时间: 2024-10-11 11:09:17

JavaScript基础 event(For IE) 显示鼠标点击处的坐标值 距离窗口的距离 距离网页的距离 距离屏幕的距离的相关文章

Javascript中的DOM实现显示鼠标的空间位置

为了显示鼠标相对于浏览器的位置(相对于屏幕和页面类似),我们能够利用click事件,获得关于鼠标单击的事件对象event.这个事件对象里的clientX和clientY包括了鼠标的位置信息,所以我突发奇想.那我可不能够通过DOM中的createElement创建一个标签元素用于在相应的鼠标位置显示当前的鼠标相对于浏览器的坐标呢? 这里我先利用Element中的createElement()方法,创建一个div的标签.为了让标签信息能显示在鼠标相应的位置处,利用div.style将相应的top.l

Unity获取鼠标点击位置,物体朝鼠标点击处移动

大型游戏中经常会有这种场景,点击屏幕位置,人物就会朝着鼠标点击位置移动,下面我们就来实现这种效果. 首先,我们在场景中添加一个Plane,并且设置它的tag为Plane,然后,在Plane上面添加一个Cube,设置好位置,刚好放置在Plane上面,最后,给cube添加一个脚本,脚本内容如下: using UnityEngine; using System.Collections; public class RayCastTest : MonoBehaviour { //cube移动速度 publ

JavaScript基础 在鼠标点击处生出图片(鼠标在哪点,图片在哪显示)

镇场诗: 清心感悟智慧语,不着世间名与利.学水处下纳百川,舍尽贡高我慢意. 学有小成返哺根,愿铸一良心博客.诚心于此写经验,愿见文者得启发.------------------------------------------ code: <!DOCTYPE html> <html onclick="CreateImg(event)"> <head> <meta http-equiv="Content-Type" conten

图片逐渐由看不见到模糊,最后清晰显示;鼠标点击图片后,图片依照1、2、3、4顺序依次循环显示;鼠标移入图片区域,图片放大

html<html<head lang="en"<meta charset="UTF-8"<titletitle</head<body<div</div<div<img src="images/1.jpg" alt="" width="192"</div<brbr<div</div<brbrbr<scriptdo

JavaScript基础--事件驱动和访问CSS技术(十)

1.原理: 2.快速入门案例 js中的事件主要分为4种: 案例:监听鼠标点击事件,并能够显示鼠标点击的位置x,y <script language="javascript" type="text/javascript"> function test1(e){ window.alert('x='+e.clientX+'y='+e.clientY); } function test2(e){ window.alert('x='+e.clientX+'y='+

【Unity3D基础】让物体动起来②--UGUI鼠标点击逐帧移动

背景 上一篇通过鼠标移动的代码很简单,所以看的人也不多,但是还是要感谢“武装三藏”在博客园给出的评论和支持,希望他也能看到第二篇,其实可以很简单,而且是精灵自控制,关键是代码少是我喜欢的方式,也再次印证了Unity3d的复杂性(同样的功能多次封装),代码如下: public class DebugTest : MonoBehaviour { RectTransform m_Rect; void Start () { m_Rect = GetComponent<RectTransform>();

Pygame中鼠标点击之后,物体逐渐移动到鼠标点击坐标的方法

1 import pygame 2 from pygame.locals import * 3 from pygame.math import * 4 import sys 5 6 pygame.init() 7 size = width, height = 1600, 900 8 screen = pygame.display.set_mode(size) 9 color = (0, 0, 0) # 设置颜色 10 ball = pygame.image.load('dabai_new.gif

JavaScript基础--DOM对象(十三):(windows对象:history\location\navigator\screen\event)

DOM编程1.为什么要学习DOM(1) 通过dom编程,我们可以写出各种网页游戏(2)dom编程也是ajax的重要基础2.DOM编程介绍DOM = Document Object Model(文档对象模型)DOM是HTML与XML的应用编程接口(API) BOM和DOM相辅相成的关系BOM为纲,DOM为目,DOM是BOM的具体体现 3.DOM对象 3.1 Windows对象 3.1.1 confirm function test(){ var res= window.confirm("你要删除&

javascript 基础之事件(event)-------1

  如果在js中想触发另一个元素的onchang,onclick 等方法可以使用obj.fireEvent("onchange");   来实现: html: <input type="checkbox" id="mycheckox2" onclick="firemycheckoxonclick()"> javascript .csharpcode, .csharpcode pre { font-size: sma