Как я могу проверить, прошел ли курсор мыши за определенную координату x?

Что я делаю неправильно? Когда я пытаюсь использовать это, он выдает ошибку:

Cannot read property 'pageX' of undefined.

Цель здесь - запустить проверку, чтобы увидеть, прошел ли курсор мыши определенную позицию x.

$( document ).on( "mousemove", function( event ) {
  $( "#log" ).text( "pageX: " + event.pageX + ", pageY: " + event.pageY );
});

var x = event.pageX; 
if (x > 1200)
{
  window.alert("Working");
}
body {
  background-color: #eef;
}
div {
  padding: 20px;
}
<script src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id = "log"></div>

Вы слишком рано закрываете свой слушатель mousemove, закройте его после оператора if. Поскольку вы новичок, важно узнать о DevTools браузера (нажмите F12), это очень поможет выявить ошибки.

Calvin Nunes 10.09.2018 20:44
var x = event.pageX; if (x > 1200) { window.alert("Working"); } должен быть внутри функции обратного вызова mousemove
atrifan 10.09.2018 20:46
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
0
2
52
2
Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

Ошибка консоли довольно четко объясняет проблему - event не определен. Единственное место в вашем коде, где переменная event находится в области видимости, - это обратный вызов для события mousemove (где это параметр функции). Итак, вам просто нужно переместить соответствующий код внутри функции обратного вызова - вот так:

$( document ).on( "mousemove", function( event ) {
  $( "#log" ).text( "pageX: " + event.pageX + ", pageY: " + event.pageY );
  var x = event.pageX; 
  if (x > 1200)
  {
    window.alert("Working");
  } 
});
Ответ принят как подходящий

Вы пытаетесь оценить событие вне функции, в которой определено. Переместите этот код внутрь функции, и он будет работать.

$( document ).on( "mousemove", function( event ) {
$( "#log" ).text( "pageX: " + event.pageX + ", pageY: " + event.pageY );

 var x = event.pageX; 
 if (x > 1200) {
  window.alert("Working");
 }
});
body {
  background-color: #eef;
}
div {
  padding: 20px;
}
<script src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id = "log"></div>

Другие вопросы по теме