Question

我很想知道是否有办法通过镀铬扩展程序获取鼠标坐标，然后使用这些坐标来检查该人是否已点击该位置？

Answer 1

获取鼠标坐标非常简单，将其放在content script：

中

document.onmousemove = function(e)
{
    var x = e.pageX;
    var y = e.pageY;
    // do what you want with x and y
};

基本上，我们正在为整个页面的onmousemove事件分配一个函数，并从事件对象（e）中获取鼠标坐标。

但是，我不完全确定你的意思：

然后使用这些坐标来检查该人是否已点击该位置？

您想检查用户是否点击了按钮之类的内容吗？在这种情况下，您可以简单地将事件订阅到该按钮（或任何其他元素），如下所示：

document.getElementById("some_element").onclick = function(e)
{
    alert("User clicked button!");
};

记录所有鼠标点击及其位置：

document.onclick = function(e)
{
    // e.target, e.srcElement and e.toElement contains the element clicked.
    alert("User clicked a " + e.target.nodeName + " element.");
};

请注意，事件对象（e）仍然可以使用鼠标坐标。

如果您在用户点击任意位置时需要坐标，则可以解决这个问题：

document.onclick = function(e)
{
    var x = e.pageX;
    var y = e.pageY;
    alert("User clicked at position (" + x + "," + y + ")")
};

Answer 2

我厌倦了每隔几周寻找一个答案，所以我创建了一个快速的脚本。它需要jquery用于dom选择，dom追加和样式编辑......这可以很容易地改变，但是本周我已经工作得太多了。

＆＃13;

(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'
        });
    });
}());

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

＆＃13;

Answer 3

在我的项目中，我将这个简单的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}`);
    }
  });
});

Answer 4

获得鼠标坐标后，您可以使用＆＃34; target＆＃34;属性为＆＃34; _blank＆＃34;在新标签页中打开网址的值 <a href="your url goes here" target="_blank">URL Display Name</a>

如果您使用任何javascript框架，则可以提供单击事件，并且在其控制器中，您可以使用默认导航方法进行导航。

通过chrome扩展获取鼠标坐标

4 个答案: