`
nianshi
  • 浏览: 416248 次
  • 性别: Icon_minigender_1
  • 来自: 济南
社区版块
存档分类
最新评论

Javascript捕获鼠标位置(跨浏览器)

阅读更多
Html代码
  1. Javascript获取鼠标位置,显示Memo,相当于Alt和Title属性,但是要比Alt和Title拉风啊  
  2.   
  3.   
  4. < html >   
  5.     < head >   
  6.         < script   type = "text/javascript" >   
  7.             function showMemo(evt,data) {  
  8.                 //alert(evt.clientX);  
  9.                 document.getElementById.('memo').style.left  =  evt .clientX;  
  10.                 document.getElementById.('memo').style.top  =  evt .clientY;  
  11.                 document.getElementById.('memo').innerHTML  =  data ;  
  12.                 document.getElementById.('memo').style.display  =  'block' ;  
  13.             }  
  14.             function hideMemo() {  
  15.                 document.getElementById.('memo').style.display  =  'none' ;  
  16.             }  
  17.         </ script >   
  18.     </ head >   
  19.     < body >   
  20.         < table >   
  21.             < tr >   
  22.                 < td   onmouseover ="showMemo(event,'Memo1');" onmouseout ="hideMemo();" > aaa </ td >   
  23.                 < td   onmouseover ="showMemo(event,'大家好,我是Memo2!!!');" onmouseout ="hideMemo();" > aaa </ td >   
  24.                 < td   onmouseover ="showMemo(event,'大家好,我是Memo3!!!');" onmouseout ="hideMemo();" > aaa </ td >   
  25.                 < td   onmouseover ="showMemo(event,'大家好,我是Memo4!!!');" onmouseout ="hideMemo();" > aaa </ td >   
  26.                 < td   onmouseover ="showMemo(event,'大家好,我是Memo5!!!');" onmouseout ="hideMemo();" > aaa </ td >   
  27.                 < td   onmouseover ="showMemo(event,'aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa');" onmouseout ="hideMemo();" > aaa </ td >   
  28.             </ tr >   
  29.             < tr >   
  30.                 < td > bbb </ td >   
  31.                 < td > bbb </ td >   
  32.                 < td > bbb </ td >   
  33.                 < td > bbb </ td >   
  34.                 < td > bbb </ td >   
  35.                 < td > bbb </ td >   
  36.             </ tr >   
  37.             < tr >   
  38.                 < td > ccc </ td >   
  39.                 < td > ccc </ td >   
  40.                 < td > ccc </ td >   
  41.                 < td > ccc </ td >   
  42.                 < td > ccc </ td >   
  43.                 < td > ccc </ td >   
  44.             </ tr >   
  45.         </ table >   
  46.         < div   id = "memo"   style = "position:absolute;border:1px solid blue;background:yellow;width:100px;display:none;word-wrap:break-word" > ddd </ div >   
  47.     </ body >   
  48. </ html >  
分享到:
评论

相关推荐

    捕获鼠标位置,图片变大

    捕获鼠标位置是指获取鼠标的实时坐标,这在JavaScript中可以通过`addEventListener`方法监听`mousemove`事件来实现。当用户移动鼠标时,浏览器会触发`mousemove`事件,并传递一个事件对象(event)到事件处理函数。...

    解决捕获鼠标时鼠标位置问题.rar

    在编程领域,尤其是在游戏开发、图形用户界面(GUI)设计或者进行特定的系统监控应用时,捕获鼠标位置是一项常见的需求。"解决捕获鼠标时鼠标位置问题"这个标题和描述提示我们,这个问题可能涉及到在特定环境下获取...

    绘图过程中捕获鼠标位置

    在计算机图形学和软件开发中,特别是在涉及到用户交互的绘图应用中,捕获鼠标位置是一项基础且重要的功能。这通常涉及到对用户在屏幕上点击或移动鼠标时的坐标位置进行实时跟踪,以便根据这些坐标执行相应的操作,如...

    javascript鼠标的捕获

    本文档将介绍如何使用JavaScript来捕获鼠标的按键事件,并根据不同的浏览器环境(如IE、Firefox、Opera等)进行兼容性处理。 #### 二、JavaScript捕获键盘按键 在JavaScript中,可以利用`onkeydown`事件监听键盘...

    JavaScript万年历——兼容多浏览器

    4. **事件处理**:用户与日历的交互通常通过点击或鼠标悬浮等事件触发,所以要熟悉JavaScript的事件模型,包括捕获、冒泡和事件委托。此外,还需要实现点击日历日期时的选中效果,以及可能的键盘导航支持。 5. **...

    《用JavaScript得到鼠标指针的位置》(高清晰pdf版)

    - 事件监听器的基础知识及其在捕获鼠标位置中的应用。 - 在不同浏览器环境下(如IE、Firefox、Chrome等)实现一致性的解决方案。 - 获取鼠标相对于页面或特定元素的坐标的方法。 - 使用DOM操作来动态更新用户界面上...

    CaptureIEEvent(浏览器事件捕获控件测试程序)

    CaptureIEEvent是一个用于测试浏览器事件捕获功能的控件,主要针对Internet Explorer浏览器。这个测试程序包含了一系列的类文件和用户界面元素,旨在帮助开发者理解和调试与浏览器交互时的事件处理。 1. **事件捕获...

    捕获鼠标坐标连续点击源码

    在IT领域,尤其是在软件开发中,有时候我们需要对鼠标的交互行为进行特定的控制,例如捕获鼠标的坐标、模拟连续点击等。这个标题"捕获鼠标坐标连续点击源码"和描述所指的知识点,主要涉及到以下几个方面: 1. **...

    JavaScript实现捕获鼠标坐标

    在JavaScript中,捕获鼠标坐标是常见的需求,...希望这个实例能帮助你更好地理解和运用JavaScript捕获鼠标坐标的技巧。在实践中,你还可以根据具体需求扩展这个功能,例如添加更多的事件处理或对坐标进行更复杂的处理。

    javascript 跨浏览器开发经验总结(五) js 事件

    JavaScript跨浏览器开发中,事件处理是一个重要而复杂的主题,因为它涉及到不同浏览器之间的兼容性问题。在JavaScript中,事件是用户或浏览器对页面交互的响应,例如点击按钮、鼠标悬停等。本文主要讨论的是如何处理...

    js 鼠标画线 兼容主流浏览器

    首先,我们需要了解JavaScript如何捕获鼠标事件。在HTML中,我们可以为需要响应鼠标的元素添加事件监听器。例如,`mousedown`事件会在鼠标按键被按下时触发,`mousemove`事件则会在鼠标移动时触发,而`mouseup`事件...

    好看的javascript网页鼠标右键菜单

    通常,网页上的鼠标右键点击事件会被浏览器默认的上下文菜单所捕获,但通过自定义JavaScript代码,我们可以覆盖这个行为,创建出个性化且功能丰富的右键菜单。 首先,要理解JavaScript事件处理机制。在HTML元素上...

    鼠标移动位置数值的实时显示

    这可以通过`addEventListener`方法实现,将回调函数绑定到`window`对象,因为我们需要在整个页面范围内捕获鼠标移动。 ```javascript window.addEventListener('mousemove', function(event) { // 在这里处理鼠标...

    javascript 多浏览器 事件大全

    JavaScript是Web开发中不可或缺的一部分,尤其在处理用户交互和页面动态行为方面发挥着重要作用。...同时,随着技术的发展,现代浏览器对这些事件的支持更加完善,可以更方便地进行跨浏览器的事件处理。

    JavaScript事件机制详细研究

    JavaScript 事件机制是指浏览器中发生的各种事件,例如点击、鼠标悬停、键盘输入等,JavaScript 通过捕捉这些事件来执行相应的操作。本文将详细介绍 JavaScript 事件机制的实现方式和原理。 事件机制的实现方式有...

    【JavaScript源代码】JavaScript实现浏览器网页自动滚动并点击的示例代码.docx

    在JavaScript中,`event`对象包含了鼠标移动时的坐标信息,如`event.pageX`和`event.pageY`分别代表鼠标在页面中的水平和垂直坐标。下面的代码片段展示了如何实时显示鼠标坐标: ```javascript document....

    JavaScript中获取鼠标位置相关属性总结

    由于JavaScript并没有专门的`mouse`对象,所以我们需要通过监听`document`的`mousemove`事件来捕获鼠标的移动情况。在处理这些事件时,会涉及到多个与鼠标位置相关的属性,它们在不同的浏览器中可能存在差异和兼容性...

    C# ASP.NET Javascript - 捕捉鼠标左右键事件

    在本文中,我们将深入探讨如何在C# ASP.NET与JavaScript环境中捕获鼠标左右键的点击事件,以及如何实现网页窗体的自动关闭功能。这些技术对于网页开发人员来说至关重要,尤其是在构建交互性强的Web应用程序时。 ...

    javascript触发模拟鼠标点击事件

    本文详细介绍了如何使用JavaScript来触发模拟的鼠标点击事件,并提供了IE浏览器和其他现代浏览器(例如Chrome、Firefox)中实现的示例代码。 首先,要理解事件触发器的概念。事件触发器是一种机制,它使得开发者...

    jquery.smoothwheel:跨浏览器平滑鼠标滚轮和触控板滚动

    `jQuery.smoothwheel`是一个专为解决这个问题设计的JavaScript插件,它致力于提供跨浏览器的平滑鼠标滚轮和触控板滚动效果,使网页滚动更加自然和流畅。 ### 一、基本原理 `jQuery.smoothwheel`的工作原理是捕获...

Global site tag (gtag.js) - Google Analytics