JavaScript 获取鼠标点击位置坐标

今天又有新的需求了,需要获取鼠标点击相对于浏览器窗口的位置,于是就要开始想办法咯。

查了教程,结果发现自己果然是文盲。

其实是很简单的,这里要说的事情有两点,第一点是关于怎么实现,第二点是关于event。

function getMousePos(event) {
    var e = event || window.event;
    console.log('x=' + e.clientY);
    console.log('y=' + e.clientX);
}

这个函数就可以得出相对于窗口的坐标。以前在写某个函数的时候也用到了event以及类似于event || window.event的形式,主要是为了兼容各个浏览器。

然后呢……event是什么呢!!我忘记了啊!!关于event,师匠发来的链接:https://developer.mozilla.org/en-US/docs/Web/API/Event

可是我不想看英文啊!!结果就没鸟这个链接,先mark一下吧。

其实吧,在进行各种事件触发的时候,有个参数传入,就是这里的event。比如element.onclick = function(),function中可加入一形参event,将它传入函数即可。

那么接下来问题又来了,怎么能让文档被点击就执行该事件?

document.onclick经过测试在IE下并不可用。用body吗?body的大小又不确定。在这里,我们使用document.documentElement其实就能搞定了:

document.documentElement.onclick = function(e) {
    getMousePos(e);
};

最终,把他转成jQuery,其实就是转换对象和转换click表现方式的事情,虽然我觉得多此一举,但是要求如此,╮( ̄▽ ̄")╭:

$(document.documentElement).click(function(e) {
    getMousePos(e);
});

忘了附上链接,这里还有各种获取鼠标位置【相对屏幕、相对浏览器、相对文档】:http://www.cnblogs.com/dolphinX/archive/2012/10/09/2717119.html

植入部分

如果您觉得文章不错,可以通过赞助支持我。

如果您不希望打赏,也可以通过关闭广告屏蔽插件的形式帮助网站运作。

标签: 知识, 代码段, 语法

添加新评论