用javascript获取当页面上鼠标光标位置和触发事件的对象的代码

用javascript获取鼠标位置：


代码如下:

function mousePosition(ev) {
if (ev.pageX || ev.pageY) {
return {
x: ev.pageX,

y: ev.pageY
};
}
return {
x: ev.clientX + document.body.scrollLeft - document.body.clientLeft,

y: ev.clientY + document.body.scrollTop - document.body.clientTop
};
}

document.onmousemove = mouseMove;
function mouseMove(ev){
ev = ev || window.event;
var mousePos = mousePosition(ev);
}

关于代码的详细说明，原文中已经介绍，现转到此处：
我们首先要声明一个 evnet 对象，无论移动、点击、按键等，都会激活一个 evnet ，在 Internet Explorer 里， event 是全局变量，会被存储在 window.event 里． 在 firefox 或者其他浏览器，event 会被相应的函数获取．当我们将mouseMove函数赋值于document.onmousemove，mouseMove 会获取鼠标移动事件。
为了让 ev 在所有浏览器下获取了 event 事件，在Firefox下"||window.event"将不起作用，因为ev已经有了赋值。在 MSIE 中 ev 为空，所以得到 window.event 。
因为在这篇文章中我们需要多次获取鼠标位置，所以我们设计了一个 mousePosition 函数，它包含一个参数 ： event 。
因为我们要在 MSIE 和其他浏览器下运行，Firefox 和其他浏览器用 event.pageX 和 event.pageY 来表示鼠标相对于文档的位置，如果你有一个 500*500 的窗口并且你的鼠标在绝对中间，那么 pageX 和 pageY 的值都是 250，如果你向下滚动 500， 那么 pageY 将变成 750。
MSIE 正好相反，它使用 event.clientX 和 event.clientY 表示鼠标相当于窗口的位置，而不是文档。在同样的例子中，如果你向下滚动500，clientY 依然是 250，因此，我们需要添加 scrollLeft 和 scrollTop 这两个相对于文档的属性。最后，MSIE 中文档并不是从 0，0 开始，而是通常有一个小的边框（通常是 2 象素），边框的大小定义在 document.body.clientLeft 和 clientTop 中，我们也把这些加进去。
很幸运，我们现在已经用 mousePosition 函数解决了坐标问题，不需为此费心了。

用javascript获取触发事件的对象


代码如下:

<script language = "javascript" >
document.onclick = onClick;
function onClick(ev)
{
ev = ev || window.event; // 事件
var target = ev.target || ev.srcElement; // 获得事件源
/* target.getAttribute()是获取该事件源对像里面的一些属性。
比如对像中有（name，id，type等等）；*/
var dragObj = target.getAttribute('id');
alert(dragObj);
}
</ script >

关键还是event对象在多浏览器下的兼容性，和上面方式是一样的，这里代码就不做说明了

赞 (0)

相关推荐

  • js实现在文本框光标处添加字符的方法介绍

    复制代码 代码如下: <script language="javascript" type="text/javascript"> function Button4_onclick(obj) { obj.focus(); var rng=document.selection.createRange(); rng.setEndPoint("StartToStart",obj.createTextRange()); var eng=docu

  • JS在可编辑的div中的光标位置插入内容的方法

    本文实例讲述了js实现在可编辑div中指定位置插入内容的方法,就像我们使用的编辑器一样,分享给大家供大家参考.具体实现方法如下: 首先要让DIV启用编辑模式 复制代码 代码如下: <div contenteditable=true id="divTest"></div> 通过设定contenteditable=true开启div的编辑模式.这样DIV就可以跟文本框一样输入内容了. 不扯话题了.下面说怎么获取或设置光标位置. 2个步骤: ① 获取DIV中的光标位置

  • js/html光标定位的实现代码

    复制代码 代码如下: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML> <HEAD> <TITLE> New Document </TITLE> <META NAME="Generator" CONTENT="EditPlus"> <META NAME="Author&q

  • javascript设置文本框光标的方法实例小结

    本文实例总结了javascript设置文本框光标的方法.分享给大家供大家参考,具体如下: 对于text //得到光标位置 function getCaret(textbox) { var control = document.activeElement; textbox.focus(); var rang = document.selection.createRange(); rang.setEndPoint("StartToStart",textbox.createTextRange

  • js光标定位文本框回车表单提交问题的解决方法

    本文实例讲述了js光标定位文本框回车表单提交问题的解决方法.分享给大家供大家参考.具体分析如下: 当光标定位在辅助查找的文本框后回车,页面会出现方法的返回的json串. 原因:When there is only one single-line text input field in a form, the user agent should accept Enter in that field as a request to submit the form. 翻译一下:当form中只有一个in

  • javascript获得光标所在的文本框(text/textarea)中的位置

    js获得光标所在的文本框(text/textarea)中的位置 function getPosition(obj){ var result = 0; if(obj.selectionStart){ //IE以外 result = obj.selectionStart }else{ //IE var rng; if(obj.tagName == "textarea"){ //TEXTAREA rng = event.srcElement.createTextRange(); rng.mo

  • JavaScript 获取/设置光标位置,兼容Input&&TextArea

    JavaScript 获取/设置光标位置,兼容Input&&TextArea. body { margin: 32px; font-family: Verdana, sans-serif; font-size: 13px; } .title { font-size: 18px; font-weight: bolder;margin:40px 0; } .input { width: 50%; font-family: Verdana, sans-serif; font-size: 13px

  • 用javascript获取textarea中的光标位置

    对于写javascript写网页编辑器的人来说,获取textarea中的光标位置是一个非常重要的问题,而往往很多人在这个地方不知所措,找不到好的办法.昨天我在网上找到了一段javascript代码,本来不想把原版放在这里的,就是因为太精彩了,怕我给改坏了,所以还是原版放在这里吧. var start=0;     var end=0;     function add(){                var textBox = document.getElementById("ta"

  • js获取光标位置和设置文本框光标位置示例代码

    复制代码 代码如下: <script type="text/javascript">        function getTxt1CursorPosition(){            var oTxt1 = document.getElementById("txt1");            var cursurPosition=-1;            if(oTxt1.selectionStart){//非IE浏览器           

  • 用javascript获取当页面上鼠标光标位置和触发事件的对象的代码

    用javascript获取鼠标位置: 复制代码 代码如下: function mousePosition(ev) { if (ev.pageX || ev.pageY) { return { x: ev.pageX, y: ev.pageY }; } return { x: ev.clientX + document.body.scrollLeft - document.body.clientLeft, y: ev.clientY + document.body.scrollTop - docu

  • javascript获取网页各种高宽及位置的方法总结

    javascript获取网页各种高宽及位置的方法总结

    screen对象 获取屏幕的高宽(分辨率) screen.width //屏幕的宽 screen.height //屏幕的高 screen.availWidth //屏幕可用宽度 屏幕的像素高度减去系统部件高度之后的值 screen.availHeight //屏幕可用高度 屏幕的像素宽度减去系统部件宽度之后的值 window对象 获得窗口位置及大小 window.screenTop //窗口顶部距屏幕顶部的距离 window.screenLeft //窗口左侧距屏幕左侧的距离 window.i

  • 微信小程序实现页面监听自定义组件的触发事件

    微信小程序实现页面监听自定义组件的触发事件,供大家参考,具体内容如下 需求:在微信小程序开发过程中,页面通常会用到提示弹框.这时为了减少代码量及代码可拓展性,我们自定义一个提示组件是必不可少的了.那么问题来了,页面如何监听到组件的触发事件呢? 下面给大家详细讲解页面如何监听自定义组件的触发事件. prompt组件: 1.首先搭建提示组件ui.由于后面各个页面都有可能用到该组件,所以我选择从页面传值过来显示提示语: 2.然后在prompt.js的点击事件里指定方法名称,该方法名称在后面的页面调用监

  • 浅谈键盘上回车按钮的js触发事件

    input 的回车触发事件. 简单,就当做个笔记咯. $("#querySearcher").live("keyup", function (e) { if (e.keyCode == 13) { xxxxxx(); } }); 以上这篇浅谈键盘上回车按钮的js触发事件就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持我们.

  • JavaScript实现检查页面上的广告是否被AdBlock屏蔽了的方法

    每个人都讨厌广告.看电视.看电影.看优酷.看网页时,对满天飞的广告也是深恶痛绝.广告是一个不招人喜欢的东西.但是,对一个中小网站站长/博客主来说,广告几乎是唯一的能成支持网站/博客正常运转的资金来源.如果一个博客主,只是无私发布稿件,能坚持几年的,很少.大多数慢慢失去了热情. 火狐浏览器和谷歌浏览器里都有能够屏蔽页面给广告的插件,最有名的是AdBlock和AdBlock Plus.前几天,我做一个统计,看看浏览网站的用户中有多少人使用了AdBlock插件,发现这个数目竟然有总浏览人数的1/5.

  • JavaScript 点击页面上的按纽，弹出层，背景变灰

    点击页面上的按纽,弹出一个层,背景变灰 点击页面上的按纽,弹出一个层,背景变灰 function sAlert(str) { var msgw,msgh,bordercolor; msgw=400;//提示窗口的宽度 msgh=100;//提示窗口的高度 titleheight=25 //提示窗口标题高度 bordercolor= "#336699 ";//提示窗口的边框颜色 titlecolor= "#99CCFF ";//提示窗口的标题颜色 var sWidth

  • JavaScript获取按钮所在form表单id的方法

    本文实例讲述了JavaScript获取按钮所在form表单id的方法.分享给大家供大家参考.具体如下: 这里使用javascript获取form表单按钮的id,可以通过下面的JS代码获取. <!DOCTYPE html> <html> <body> <h1>www.sharejs.com</h1> <form id="form1"> <button id="button1" type=&q

  • js实现的光标位置工具函数示例

    本文实例讲述了js实现的光标位置工具函数.分享给大家供大家参考,具体如下: 这里介绍的一款textarea中光标位置工具函数的例子. html代码: <p>文本框:</p> <textarea name="" id="textarea" cols="30" rows="10"> sASASADASDasfaDFDsfsDFAfdFADf </textarea> <butto

  • JavaScript获取页面上被选中文字的方法技巧

    JavaScript获取页面上被选中文字的方法技巧

    这里介绍的一个小技巧是如何用JavaScript获取页面上被选中的文字的方法.最关键的JavaScript API是: 复制代码 代码如下: event.selection = window.getSelection(); 这里的selection实际上是个对象,但如果我们使用 .toString()或强行转化成字符串,我们将得到被选中的文字. 复制代码 代码如下: $(document).ready(function () {    $(".contenttext").mouseup

  • JavaScript获取页面上某个元素的代码

    JavaScript获取页面上某个元素的代码

    W3C标准推荐的语法是通过document文档对象获取DOM树内的内的某个元素,常见的方法有getElementById().getElementsByName().getElementsByTagName(),他们的作用分别通过id属性.name属性/标签名称返回单个节点或节点集合. 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/

随机推荐