Как получить место мыши в jQuery без мыши-событий? -- jquery поле с участием mouse поле с участием position пол Связанный проблема

How to get mouse position in jQuery without mouse-events?


102
vote

проблема

русский

Я хотел бы получить текущую позицию мыши, но я не хочу использовать:

 <код> $(document).bind('mousemove',function(e){          $("#log").text("e.pageX: " + e.pageX + ", e.pageY: " + e.pageY);  });    

Потому что мне просто нужно получить позицию и обработать информацию

Английский оригинал

I would like to get current mouse position but I don't want to use:

$(document).bind('mousemove',function(e){          $("#log").text("e.pageX: " + e.pageX + ", e.pageY: " + e.pageY);  });  

because I just need to get the position and process the information

</div
        
   
   

Список ответов

153
 
vote
vote
Лучший ответ
 

Я не верю, что есть способ QUERY Положение мыши, но вы можете использовать mousemove обработчик, который просто хранит информацию, чтобы вы могли запрашивать хранимая информация.

 <код> jQuery(function($) {     var currentMousePos = { x: -1, y: -1 };     $(document).mousemove(function(event) {         currentMousePos.x = event.pageX;         currentMousePos.y = event.pageY;     });      // ELSEWHERE, your code that needs to know the mouse position without an event     if (currentMousePos.x < 10) {         // ....     } });   

Но почти все код, кроме <Код> setTimeout Code и такие, работает в ответ на событие, и большинство событий обеспечивают положение мыши. Таким образом, ваш код, который должен знать, где мышь, вероятно, уже имеет доступ к этой информации ...

 

I don't believe there's a way to query the mouse position, but you can use a mousemove handler that just stores the information away, so you can query the stored information.

jQuery(function($) {     var currentMousePos = { x: -1, y: -1 };     $(document).mousemove(function(event) {         currentMousePos.x = event.pageX;         currentMousePos.y = event.pageY;     });      // ELSEWHERE, your code that needs to know the mouse position without an event     if (currentMousePos.x < 10) {         // ....     } }); 

But almost all code, other than setTimeout code and such, runs in response to an event, and most events provide the mouse position. So your code that needs to know where the mouse is probably already has access to that information...

</div
 
 
     
     
26
 
vote

Вы не можете прочитать положение мыши в jQuery без использования события. Примечание. Во-первых, что на любом событии существует <код> var mouseX, mouseY; $(document).mousemove(function(e) { mouseX = e.pageX; mouseY = e.pageY; }).mouseover(); // call the handler immediately // do something with mouseX and mouseY 3 и <код> event.pageY , чтобы вы могли сделать:

 <код> $('#myEl').click(function(e) {     console.log(e.pageX); });   

Ваш другой вариант - использовать замыкание, чтобы получить весь код доступа к переменной, которая обновляется обработчиком MouseMove:

 <код> var mouseX, mouseY; $(document).mousemove(function(e) {     mouseX = e.pageX;     mouseY = e.pageY; }).mouseover(); // call the handler immediately  // do something with mouseX and mouseY   
 

You can't read mouse position in jQuery without using an event. Note firstly that the event.pageX and event.pageY properties exists on any event, so you could do:

$('#myEl').click(function(e) {     console.log(e.pageX); }); 

Your other option is to use a closure to give your whole code access to a variable that is updated by a mousemove handler:

var mouseX, mouseY; $(document).mousemove(function(e) {     mouseX = e.pageX;     mouseY = e.pageY; }).mouseover(); // call the handler immediately  // do something with mouseX and mouseY 
</div
 
 
 
 
11
 
vote

Я использовал этот метод:

 <код> $(document).mousemove(function(e) {     window.x = e.pageX;     window.y = e.pageY; });  function show_popup(str) {     $("#popup_content").html(str);     $("#popup").fadeIn("fast");     $("#popup").css("top", y);     $("#popup").css("left", x); }   

Таким образом, у меня всегда будет расстояние от вершины, сохраненного в Y, и расстояние от левой, сохраненной в X.

 

I used this method:

$(document).mousemove(function(e) {     window.x = e.pageX;     window.y = e.pageY; });  function show_popup(str) {     $("#popup_content").html(str);     $("#popup").fadeIn("fast");     $("#popup").css("top", y);     $("#popup").css("left", x); } 

In this way I'll always have the distance from the top saved in y and the distance from the left saved in x.

</div
 
 
6
 
vote

Более того, <Код> mousemove события не запускается, если вы выполняете Drag'n'drop через окно браузера. Чтобы отслеживать координаты мыши во время Drag'n'drop, вы должны прикрепить обработчик для document.ondragover события и использовать его оригинальное свойство.

Пример:

 <код> jQuery(function($) {     var currentMousePos = { x: -1, y: -1 };     $(document).mousemove(function(event) {         currentMousePos.x = event.pageX;         currentMousePos.y = event.pageY;     });      // ELSEWHERE, your code that needs to know the mouse position without an event     if (currentMousePos.x < 10) {         // ....     } }); 0  
 

Moreover, mousemove events are not triggered if you perform drag'n'drop over a browser window. To track mouse coordinates during drag'n'drop you should attach handler for document.ondragover event and use it's originalEvent property.

Example:

var globalDragOver = function (e) {     var original = e.originalEvent;     if (original)     {         window.x = original.pageX;         window.y = original.pageY;     } } 
</div
 
 
2
 
vote

Используйте <код> jQuery(function($) { var currentMousePos = { x: -1, y: -1 }; $(document).mousemove(function(event) { currentMousePos.x = event.pageX; currentMousePos.y = event.pageY; }); // ELSEWHERE, your code that needs to know the mouse position without an event if (currentMousePos.x < 10) { // .... } }); 1 - он содержит последний <код> jQuery(function($) { var currentMousePos = { x: -1, y: -1 }; $(document).mousemove(function(event) { currentMousePos.x = event.pageX; currentMousePos.y = event.pageY; }); // ELSEWHERE, your code that needs to know the mouse position without an event if (currentMousePos.x < 10) { // .... } }); 2 и как любой <код> jQuery(function($) { var currentMousePos = { x: -1, y: -1 }; $(document).mousemove(function(event) { currentMousePos.x = event.pageX; currentMousePos.y = event.pageY; }); // ELSEWHERE, your code that needs to know the mouse position without an event if (currentMousePos.x < 10) { // .... } }); 3 содержит <код> jQuery(function($) { var currentMousePos = { x: -1, y: -1 }; $(document).mousemove(function(event) { currentMousePos.x = event.pageX; currentMousePos.y = event.pageY; }); // ELSEWHERE, your code that needs to know the mouse position without an event if (currentMousePos.x < 10) { // .... } }); 4 , <код> jQuery(function($) { var currentMousePos = { x: -1, y: -1 }; $(document).mousemove(function(event) { currentMousePos.x = event.pageX; currentMousePos.y = event.pageY; }); // ELSEWHERE, your code that needs to know the mouse position without an event if (currentMousePos.x < 10) { // .... } }); 5 / код> и т. Д. Работает для Chrome, Safari, т.е. но не FF.

 

use window.event - it contains last event and as any event contains pageX, pageY etc. Works for Chrome, Safari, IE but not FF.

</div
 
 
0
 
vote
 <код> jQuery(function($) {     var currentMousePos = { x: -1, y: -1 };     $(document).mousemove(function(event) {         currentMousePos.x = event.pageX;         currentMousePos.y = event.pageY;     });      // ELSEWHERE, your code that needs to know the mouse position without an event     if (currentMousePos.x < 10) {         // ....     } }); 6  

Сделайте EventListener на главном объекте, в моем случае объект документа, чтобы получить координы мыши каждый кадр и хранить их в глобальных переменных, и, как будто вы можете читать мышь Y & AMP; Z Всякий раз, когда вы хотите, где бы вы ни понравились.

 
var CurrentMouseXPostion; var CurrentMouseYPostion;  $(document).mousemove(function(event) {     CurrentMouseXPostion = event.pageX;     CurrentMouseYPostion = event.pageY; }); 

Make an eventListener on the main object , in my case the document object, to get the mouse coords every frame and store them in global variables, and like that you can read mouse Y & Z whenever youlike , wherever you like.

</div
 
 
-1
 
vote

Я наткнулся на это, Tot было бы неплохо поделиться ...

Что вы, ребята, думаете?

 <код> jQuery(function($) {     var currentMousePos = { x: -1, y: -1 };     $(document).mousemove(function(event) {         currentMousePos.x = event.pageX;         currentMousePos.y = event.pageY;     });      // ELSEWHERE, your code that needs to know the mouse position without an event     if (currentMousePos.x < 10) {         // ....     } }); 7  

и boom, там у нас есть ..

 

I came across this, tot it would be nice to share...

What do you guys think?

$(document).ready(function() {   window.mousemove = function(e) {     p = $(e).position();  //remember $(e) - could be any html tag also..      left = e.left;        //retrieving the left position of the div...      top = e.top;          //get the top position of the div...    } }); 

and boom, there we have it..

</div
 
 

Связанный проблема

3  jquery Выберите и перетащите Chrome Shood  ( Jquery select and drag chrome problem ) 
У меня есть функция выбора и перетаскивания. В основном вы можете выбрать 3 элемента и перетащить их вместе. Проблема в Chrome. Если один элемент имеет «-We...

1  Форма подписки Rapidmail перенаправляет после подписки электронной почты - MailChimp  ( Rapidmail subscription form redirect after email subscription mailchimp ) 
Я создаю веб-страницу, которая включает в себя очень простую форму подписки, в основном собирая адреса электронной почты, заинтересованные в продукте. Для это...

0  Авто не показывая результат jQuery  ( Auto complete not showing result jquery ) 
Я пытаюсь создать автоматическую комплектацию, используя jqueryui.i am echo ing a jquery a age ange Результат базы данных из удаленного поиска файлов.php.it п...

1  JSON Данные не рендеринга в раскрывании Kendo UI  ( Json data not rendering in kendo ui dropdown ) 
пытается сделать <код> Json Возвращенные данные в <Код> kendo Выпадающий список, но не рендеринг. Пожалуйста, найдите код Snippett. Я могу увидеть бдительну...

0  Как закрыть всплывающее окно, когда видео YouTube играет на кнопке кнопки ESC?  ( How to close popup when youtube video is playing on esc button button ) 
Нажмите меня, чтобы увидеть демонстрацию Когда видео не играет, то кнопка ESC нажала всплывающее окно, но он не работает при воспроизведении видео. ...

0  JQuery и Radio Button Help  ( Jquery and radio button help ) 
У меня есть данные, импортируемые из базы данных, и я хотел бы представлять эти данные в наборе радиопередач. Если значение в базе данных - 1 «Статус клиента»...

6  Как я могу найти неиспользованные CSS в AJAX приложении?  ( How can i find unused css in ajax app ) 
Я искал, и я не могу найти какие-либо дополнения или JavaScript для поиска неиспользованных CSS в приложениях AJAX. Select-Me Selectors Можете сделать са...

3  Scrolltop () не работает плавно в Chrome & Safari, но работают в Firefox  ( Scrolltop is not work smoothly in chrome safari but work in firefox ) 
Если вы проверяете эту ссылку http://jsfiddle.net/hbkdt/ . <код> $(window).scroll(function() { $(".fixed").css("top", $(window).scrollTop() + "px");...

0  Удалите подстроку из строки в jQuery [дублировать]  ( Remove a substring from a string in jquery ) 
<в сторону CLASS = "S-NEWACTS S-WELTIVE__info JS-Post-New Imide MB16« Роль = «Статус»> Этот вопрос уже есть ответы здесь : ...

1  JavaScript не работает над динамическим контентом  ( Javascript not working on dynamic content ) 
У меня есть страница, где в HTML Div загружен с другой страницы. На родительской странице у меня есть JavaScript, который имеет элементы, которые применяются ...

4  Каковы разница между $ (документом) .bind («готовая», функция) и $ (документ). Ready (функция (функция () {}))  ( What are the difference between document bindready function and docume ) 
Я хочу обновить от Verysjs версии 2.0.0 до 2.1.5 Вот код: <код> define(['jquery', 'test.js'], function ($, test) { var test = new $.test({ ...

0  Показать Скрыть div on click  ( Show hide a div on click issues ) 
У меня есть изображение с классом «Action_image», который при нажатии показывает меню. Это изображение с скрытым меню появляется несколько раз на той же стран...

2  jQuery: Создание соответствующих текстовых ящиков влияет на значения друг друга  ( Jquery making corresponding text boxes affect eachothers values ) 
Ситуация: 2 Текстовые поля, TextBoxa и TextBoxB. Я вхожу в текст в TextBoxa, и устанавливает значение TextBoxB. Теперь мне нужно уметь редактировать значени...

0  .append () элемент с более чем одним классом  ( Append element with more than one class ) 
Я не могу найти информацию о том, можно ли использовать .append (), чтобы добавить элемент в HTML и дать этому элементу более одного класса <код> $( ".nav"...

0  Разбор в твиттере JSON  ( Parsing a twitter json ) 
Я использую следующий код для Perfom A Поиск в API Twitter: <код> $.post('lib/themattharris-tmhOAuth-38bd48b/search.php', {q:'@something', pag...

Связанный проблема

3  jquery Выберите и перетащите Chrome Shood 
1  Форма подписки Rapidmail перенаправляет после подписки электронной почты - MailChimp 
0  Авто не показывая результат jQuery 
1  JSON Данные не рендеринга в раскрывании Kendo UI 
0  Как закрыть всплывающее окно, когда видео YouTube играет на кнопке кнопки ESC? 
0  JQuery и Radio Button Help 
6  Как я могу найти неиспользованные CSS в AJAX приложении? 
3  Scrolltop () не работает плавно в Chrome & Safari, но работают в Firefox 
0  Удалите подстроку из строки в jQuery [дублировать] 
1  JavaScript не работает над динамическим контентом 
4  Каковы разница между $ (документом) .bind («готовая», функция) и $ (документ). Ready (функция (функция () {})) 
0  Показать Скрыть div on click 
2  jQuery: Создание соответствующих текстовых ящиков влияет на значения друг друга 
0  .append () элемент с более чем одним классом 
0  Разбор в твиттере JSON