получить координаты мыши через расширение chrome

Question

получить координаты мыши через расширение chrome

Мне интересно знать, есть ли способ получить координаты мыши через расширение chrome, а затем использовать эти координаты, чтобы проверить, нажал ли человек в этой позиции ?

628 4

javascript google-chrome google-chrome-extension

4 ответов:

Comments

Ничего не найдено.

Håvard · Accepted Answer · 2011-06-26 23:27:54

Получить координаты мыши очень просто, поместите это в скрипт содержимого :
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 + ")")
};

SgtPooki · Accepted Answer · 2015-04-11 08:07:28

Я так устал искать ответ на этот вопрос каждые несколько недель, что создал быстрый сценарий. Он требует 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>

Graham Nessler · Accepted Answer · 2016-11-30 08:51:13

В своих проектах я помещаю этот простой скрипт 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}`);
    }
  });
});

Vasuki Dileep · Accepted Answer · 2015-03-03 12:40:29

Как только у вас есть координаты мыши, вы можете использовать атрибут "target" со значением "_blank", чтобы открыть url-адрес в новой вкладке.
<a href="your url goes here" target="_blank">URL Display Name</a>

Если вы используете любую платформу javascript, вы можете предоставить событие click и в его контроллере вы можете использовать метод навигации по умолчанию для навигации.