Переместить указатель мыши в определенное место?

127

Я создаю игру HTML5, и я пытаюсь навести курсор мыши на определенный элемент управления в конкретном событии, чтобы движение в определенном направлении всегда приводило к одинаковому результату. Это возможно?

Dennkster
источник
Если я правильно понимаю, вы хотите переместить курсор мыши с помощью JS - это невозможно. Вам нужно будет найти другой способ.
30
1
В HTML5 есть несколько новых событий мыши, но нет ничего, что могло бы двигать мышь. Вы всегда можете window.moveBy (x, y); чтобы переместить окно под то место, где парит мышь ... это была бы довольно забавная игра :) Я вижу, что это можно сделать только с помощью ActiveX - фууууу!
Джереми Томпсон
1
Нет - JavaScript не позволит вам этого сделать, но я предполагаю, что может быть обходной путь, который включает в себя перемещение страницы в определенное место, которое также «перемещает» курсор с помощью окна scrollTo () - см. W3Schools на w3schools.com/jsref/met_win_scrollto.asp .
Stardust
1
Удачи с перемещением мыши на смартфонах.
Cœur
Изображение указателя мыши можно перемещать и устанавливать курсор: нет. Это не угроза безопасности, потому что вы программист. Если вы можете создать игру, вы также можете избежать риска получить доступ к своему банковскому счету во время игры.

Ответы:

20

Итак, я знаю, что это старая тема, но сначала скажу, что это невозможно. Самое близкое в настоящее время - это фиксация мыши в одной позиции и отслеживание изменений ее x и y. Эта концепция была принята - похоже - Chrome и Firefox. Это управляется так называемым замком мыши , и нажатие на побег сломает его. Из моего краткого прочтения я думаю, что идея состоит в том, что он фиксирует мышь в одном месте и сообщает о событиях движения, подобных событиям щелчка и перетаскивания.

Вот документация по выпуску:
FireFox: https://developer.mozilla.org/en-US/docs/Web/API/Pointer_Lock_API
Chrome: http://www.chromium.org/developers/design-documents/mouse-lock

А вот и довольно изящная демонстрация: http://media.tojicode.com/q3bsp/

CodeSmith
источник
Я воспринимаю это как новый принятый ответ, потому что это именно тот вариант использования, о котором я просил, хотя он поддерживается не во всех браузерах.
Dennkster
188

Вы не можете перемещать указатель мыши с помощью javascript.

Подумайте на секунду о последствиях, если сможете;)

  1. Пользователь думает: «Эй, я бы хотел перейти по этой ссылке»
  2. Javascript перемещает курсор мыши на другую ссылку
  3. Пользователь нажимает неправильную ссылку и непреднамеренно загружает вредоносное ПО, которое форматирует его c-drive, и ест его конфеты.
Мартин Есперсен
источник
74
НАСТОЯЩИЙ кликджекинг.
Blender
15
Если подумать, это было бы круто: P
Мартин Есперсен
24
Хех, я бы ненавидел борьбу за контроль над курсором мыши: НАЗАД РЕКЛАМА, НАЗАД Я ГОВОРЮ!
Blender
78
Веб-страница может принудительно загрузиться, не требуя от кого-либо щелкать ссылку, поэтому то, что вы утверждаете, на самом деле не является проблемой безопасности. Однако отсутствие возможности выйти за пределы окна веб-страницы.
dionyziz 02
11
@dionyziz: Существует довольно большая разница между принудительной загрузкой в ​​песочницу и загрузкой из пользовательского пространства, запущенной взаимодействием с пользователем. На самом деле последствия для безопасности очень велики.
Мартин Джесперсен,
88
  1. Запустите небольшой веб-сервер на клиентской машине. Может быть небольшой файл размером 100 Кбайт. Скрипт Python / Perl и т. Д.
  2. Включите небольшой предварительно скомпилированный исполняемый файл C, который может перемещать мышь.
  3. Запустите его как CGI-скрипт с помощью простого HTTP-вызова, AJAX или чего угодно - с координатами, на которые вы хотите переместить мышь, например:

    http://localhost:9876/cgi/mousemover?x=200&y=450

PS: Для любой проблемы есть сотни оправданий того, почему и как - это не может и не должно - быть выполнено ... Но в этой бесконечной вселенной это действительно просто вопрос определения - относительно того, будете ли ВЫ сделает это возможным.

Алекс Грей
источник
13
Думаю, мы все были на борту до "c исполняемого файла" ... xD
dGRAMOP
1
веб-сервер? возможно вы имеете в виду программу с http интерфейсом .. нет необходимости в сети. Язык программирования Go может быть преимуществом перед C в том, что он может упростить добавление части http, или, альтернативно, интерпретатор nodejs будет запускать код, который также может довольно легко включать интерфейс http, поскольку интерпретатор nodejs создан для упрощения писать серверные приложения.
barlop
3
C = 0 зависимостей. Интернет - это http. Здесь нет симпатичной домашней страницы .. Только транспорт.
Алекс Грей
+1 за PS. Можем ли мы выполнять вызовы CGI, используя node dev-server или что-нибудь подобное npmjs.com/package/http-server ??
ATHER
1
Кто-нибудь из вас когда-нибудь замечал Javascriptметку под вопросом?
80

Я бы предположил, что вы могли бы поместить курсор мыши в заданную область экрана, если бы вы не использовали настоящий (системный) курсор мыши.

Например, вы можете создать изображение, которое будет действовать вместо вашего курсора, обработать событие, которое при обнаружении mouseenter в вашей сцене, установить для стиля системного курсора значение 'none' ( sceneElement.style.cursor = 'none'), затем вызвать скрытый элемент изображения, действующий в качестве курсора, чтобы быть в любом месте сцены на основе предопределенного перемещения оси / ограничивающей рамки.

Таким образом, независимо от того, как вы перемещаете реальный курсор, ваш метод перевода будет держать курсор изображения там, где он вам нужен.

редактировать: пример в jsFiddle с использованием представления изображения и принудительного движения мыши

Xaxis
источник
5
Да, ты можешь. Вы просто устанавливаете стиль курсора для данного элемента на «none». Попробуйте.
Xaxis
14
Это самый продуманный ответ. И на самом деле предоставляет реальное решение, в то время как некоторые другие ответы действительно добавляют какую-либо ценность :) Но как webgl будет приносить интересные игры, такие как FPS и т. Д., Когда мы не можем получить какую-либо блокировку мыши, это звучит довольно ограничивающе ...
Dennkster
3
У этого все еще есть проблема, заключающаяся в том, что вы не можете «двигать» вашу мышь влево. Как только мышь покидает веб-страницу, вы не можете контролировать ее.
dionyziz 02
2
Это прекрасное решение этой проблемы. Единственная причина, по которой люди жалуются, заключается в том, что это нетривиальное решение. Иногда приходится заниматься программированием, ребята!
Марти
5
поигрался с этой идеей и сделал пример в JSFiddle jsfiddle.net/jaakkytt/9uczV
Яак Кютт
65

Отличный вопрос. Этого действительно чего-то не хватает в API браузера Javascript. Я также работаю над игрой WebGL со своей командой, и нам нужна эта функция. Я открыл проблему в bugzilla Firefox, чтобы мы могли начать говорить о возможности наличия API, позволяющего блокировать мышь. Это будет полезно для всех разработчиков игр HTML5 / WebGL.

Если хотите, подойдите и оставьте комментарий со своим отзывом и проголосуйте за проблему:

https://bugzilla.mozilla.org/show_bug.cgi?id=630979

Спасибо!

dionyziz
источник
9
Обновление: bugzilla.mozilla.org/show_bug.cgi?id=633602 и спецификация w3 для блокировки указателя: dvcs.w3.org/hg/pointerlock/raw-file/default/index.html
Крис Андерсон,
51
Если это произойдет, я перестану пользоваться браузером. :-P Серьезно, веб-сайты просто не требуют согласия, которое вы даете при установке приложения. Это было бы отличной функцией, если бы мы все были хорошими парнями, просто используя этот уровень контроля для улучшения взаимодействия с пользователем. К сожалению, Интернет занимает центральное место в придурках, поэтому есть много действительно полезных функций, которые мы, надеюсь, никогда не увидим в браузере. При этом: полноэкранный API будет работать, чтобы «заблокировать» остальную часть ОС.
Кто-то
4
Согласие @Someone будет запрошено до того, как такая блокировка станет возможной для приложения (аналогично тому, как сейчас запрашивается полноэкранное согласие в популярных веб-браузерах). Кроме того, пользователь всегда может отозвать согласие, нажав клавишу ESC.
dionyziz
7
Это случилось. И это довольно круто (если все еще с префиксом поставщика): mdn.github.io/pointer-lock-demo
ericsoco
1
@ericsoco К сожалению, эта ссылка не работает. Это может помочь: https://developer.mozilla.org/en-US/docs/Web/API/Pointer_Lock_API
Тиан ван
46

Вы можете определить положение указателя мыши, а затем переместить веб-страницу (с относительным положением тела), чтобы они наводили курсор на то, что вы хотите, чтобы они щелкнули.

Например, вы можете вставить этот код на текущую страницу в консоли браузера (и затем обновить)

var upvote_position = $('#answer-12878316').position();
$('body').mousemove(function (event) {
    $(this).css({
        position: 'relative',
        left: (event.pageX - upvote_position.left - 22) + 'px',
        top: (event.pageY - upvote_position.top - 35) + 'px'
    });        
});
Амишей G
источник
2
Ваш пост был бы более ценным, если бы вы могли опубликовать пример кода, который это делает. Также я предлагаю вам взглянуть на FAQ: stackoverflow.com/faq
ForceMagic,
Как на самом деле щелкнуть нужный элемент, когда пользователь щелкнет?
ммм
@momomo Вы можете использоватьdocument.getElementByID('thingtoclick').click();
каскадный стиль
1
Это было потрясающе! Способ мыслить нестандартно! Я сомневаюсь, что это действительно дает то, что хотел вопрошающий, но, как бы круто это ни было, кого это волнует?
gcdev
12

Вы не можете двигать мышью, но можете заблокировать ее. Примечание: вы должны вызывать requestPointerLock в событии щелчка.

Маленький пример:

var canvas = document.getElementById('mycanvas');
canvas.requestPointerLock = canvas.requestPointerLock || canvas.mozRequestPointerLock || canvas.webkitRequestPointerLock;
canvas.requestPointerLock();

Документация и пример полного кода:

https://developer.mozilla.org/en-US/docs/Web/API/Pointer_Lock_API

Дмитрий Босиков
источник
4

Вы не можете перемещать указатель мыши с помощью javascript, и, следовательно, по очевидным причинам безопасности. Лучший способ добиться этого эффекта - поместить элемент управления под указатель мыши.

Sheavi
источник
1
Последствия для безопасности далеко не очевидны. Фактически, недавние дополнения к стандартам предоставляют эту возможность без каких-либо серьезных проблем с безопасностью.
dionyziz
но тогда как это возможно в API перетаскивания?
oldboy
0

Нельзя ли это сделать просто путем получения фактического положения указателя мыши, а затем вычисления и компенсации действий мыши спрайта / сцены на основе этой компенсации?

Например, вам нужно, чтобы указатель мыши находился внизу в центре, но он располагался вверху слева; скрыть курсор, использовать смещенное изображение курсора. Сдвиньте движение курсора и сопоставьте ввод мыши, чтобы он соответствовал нажатию спрайта перемещенного курсора (или «элемента управления»). При / при достижении границ пересчитать. Если / когда курсор действительно попадает в точку, в которой вы хотите, удалите компенсацию.

Заявление об отказе от ответственности, а не разработчик игр.

Эрик Шоберг
источник
по существу идентичен ответу Xaxis.
mathheadinclouds
@mathheadinclouds действительно, но не зависит от реализации блокировки мыши в браузере. Итак, по сути; но нет. Спасибо за ваше мнение. - Отредактировано: Неважно. Я понимаю, о чем вы говорите. Думаю, тогда я бы подумал только, что это не бесполезно. В этом больше неспециалистов, чем в ответе Xaxis.
Эрик Шоберг
0

Интересный. Это невозможно напрямую по причинам, названным ранее (клики по спаму и внедрение вредоносного ПО), но рассмотрите этот взлом, который создает такое же впечатление:

Шаг 1. Скройте курсор

Допустим, у вас есть div, вы можете использовать это свойство css, чтобы скрыть настоящий курсор:

.your_div {
    cursor: none
}

Шаг 2: введите псевдокурсор

Просто создайте изображение, похожее на курсор, и поместите его на свою веб-страницу с position = 'absolute'.

Шаг 3. Отслеживайте фактическое движение мыши

Это просто. Узнайте в Интернете, как получить реальное местоположение мыши (координаты X и Y).

Шаг 4. Переместите псевдокурсор

По мере того, как фактический курсор перемещается, перемещайте псевдокурсор на ту же разницу X и Y. Точно так же вы всегда можете сгенерировать событие щелчка в любом месте своей веб-страницы с помощью магии JavaScript (просто поищите в Интернете инструкции).

Теперь на этом этапе вы можете управлять псевдо-курсором так, как хотите, и у вашего пользователя будет впечатление, что настоящий курсор движется.

====

Справедливое предупреждение: не делайте этого. Никто не хочет, чтобы их курсор или компьютер управлялись таким образом, если только у вас нет какого-либо конкретного варианта использования или если вы решительно настроены убежать от своих пользователей.

Санджай Верма
источник