javascript 通过chrome扩展获取鼠标坐标
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/6486084/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
obtain mouse coordinates through chrome extension
提问by user782400
I am curious to know if there is a way to get the mouse coordinates through a chrome extension and then use these coordinates to check if the person has clicked in that position ?
我很想知道是否有办法通过 chrome 扩展获取鼠标坐标，然后使用这些坐标来检查该人是否点击了该位置？
回答by H?vard
Getting the mouse coordinates is very simple, put this in a content script:
获取鼠标坐标非常简单，将其放在内容脚本中：
document.onmousemove = function(e)
{
var x = e.pageX;
var y = e.pageY;
// do what you want with x and y
};
Essentially, we are assigning a function to the onmousemoveevent of the entire page, and getting the mouse coordinates out of the event object (e).
本质上，我们正在onmousemove为整个页面的事件分配一个函数，并从事件对象 ( e) 中获取鼠标坐标。
However, I'm not entirely sure what you mean by this:
但是，我不完全确定您的意思是什么：
then use these coordinates to check if the person has clicked in that position ?
然后使用这些坐标来检查这个人是否点击了那个位置？
Do you want to check if a user clicks something like a button? In that case you can simply subscribe an event to that button (or any other element) like this:
你想检查用户是否点击了按钮之类的东西？在这种情况下，您可以简单地为该按钮（或任何其他元素）订阅一个事件，如下所示：
document.getElementById("some_element").onclick = function(e)
{
alert("User clicked button!");
};
To record all mouse clicks and where they are:
记录所有鼠标点击及其位置：
document.onclick = function(e)
{
// e.target, e.srcElement and e.toElement contains the element clicked.
alert("User clicked a " + e.target.nodeName + " element.");
};
Note that the mouse coordinates are still available in the event object (e).
请注意，鼠标坐标在事件对象 ( e)中仍然可用。
If you need the coordinates when a user clicks an arbitrary location, this does the trick:
如果您在用户单击任意位置时需要坐标，则可以这样做：
document.onclick = function(e)
{
var x = e.pageX;
var y = e.pageY;
alert("User clicked at position (" + x + "," + y + ")")
};
回答by SgtPooki
I was so tired of searching for an answer to this every few weeks so I created a quick script. It requires jquery for dom selection, dom appending, and style editing.. this could be easily changed, but i've already worked too much this week.
我厌倦了每隔几周寻找一个答案，所以我创建了一个快速脚本。它需要 jquery 来进行 dom 选择、dom 附加和样式编辑。这很容易改变，但我这周已经工作太多了。
(function() {
'use strict';
var $toolTip = $('<div/>');
$toolTip.addClass('customTooltip-rsd')
.css({
position: 'absolute',
display: 'inline-block',
'font-size': '22px',
backgroundColor: '#000',
color: '#ffffff',
'z-index': 9999999999,
padding: '10px',
'word-spacing': '10px',
'border-radius': '50%',
width: 100,
height: 100,
'line-height': '100px',
'text-align': 'center',
'font-weight': 'bold'
})
;
$(document.body).append($toolTip);
$(window).on('mousemove', function(e) {
var posX = e.pageX;
var posY = e.pageY;
$toolTip.text(posX + ',' + posY).css({
top: posY + 'px',
left: posX + 'px'
});
});
}());<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>回答by Graham Nessler
In my projects, I put this simple jQuery script in a separate file to check for xand ycoordinates. I can simply toggle it off and on with the trackingMousevariable.
在我的项目中，我将这个简单的 jQuery 脚本放在一个单独的文件中以检查x和y坐标。我可以简单地使用trackingMouse变量关闭和打开它。
// this lets you click anywhere on the page and see the x and y coordinates
let trackingMouse = true;
$(document).ready(() => {
$(document).on('click', (e) => {
if (trackingMouse) {
let x = e.pageX;
let y = e.pageY;
console.log(`The x coordinate is: ${x}`);
console.log(`The y coordinate is: ${y}`);
}
});
});
回答by Vasuki Dileep
Once you have the mouse coordinates, you can make use of "target" attribute with "_blank" value to open an url in a new tab.<a href="your url goes here" target="_blank">URL Display Name</a>
获得鼠标坐标后，您可以使用带有“_blank”值的“target”属性在新选项卡中打开一个 url。<a href="your url goes here" target="_blank">URL Display Name</a>
If you are using any javascript framework, you can provide a click event and in its controller, you can make use of default navigate method to navigate.
如果您使用任何 javascript 框架，您可以提供一个点击事件，并在其控制器中，您可以使用默认导航方法进行导航。
