Блог

Главная - Вопросы по программированию - Щелчок мыши не дает координат

Щелчок мыши не дает координат

#javascript #jquery #html

#javascript #jquery #HTML

Вопрос:

Я хочу получить координаты мыши в событии щелчка и отобразить их для меня. В настоящее время он не работает.

Это мой скрипт:

 <!doctype html>
<html lang="en">
<head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
</head>
<body>
  <script>
    $(document).ready(
      $("#image").on({
        click: function (e) {
          x=e.pageX;
          alert(x);
        }
      })
    )
  </script>
  <img src="back.jpg" id="image" height="100px" width="100px" />
</body>
</html>

Комментарии:

1. Работает для меня. Что-то не так где-то еще. jsfiddle.net/3m7urj5p

2. Пожалуйста, сначала смените тему!

3. @synthet1c — неверно. Вы можете сделать это в любом случае. Ваше предложение позволяет добавлять по одному обработчику за раз, другой способ позволяет добавлять их несколько в одном вызове — по 1 свойству на обработчик. Смотрите здесь: jsfiddle.net/3m7urj5p/1

4. приветствую вас @enhzflep Я удалил комментарий и обновил свои знания о методе.

5. Работает нормально: jsfiddle.net/rayon_1990/xev44y59

Ответ №1:

попробуйте это..

 $(document).ready(function(){
   $("#image").click(function (e){
      x=e.pageX;
      alert(x);
   });
});  
 <!doctype html>
<html lang="en">
<head>
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js">    </script>
</head>
<body>
	<img src="http://ultraimg.com/images/2016/07/29/Simplest-Responsive-jQuery-Image-Lightbox-Plugin-simple-lightbox.jpg" id="image" height="100px" width="100px" />
</body>
</html>

Комментарии:

1. Код, совместно используемый OP, работает нормально.. Зачем отвечать, если да?

2. Вопрос @Rayon был отредактирован с помощью ans. в то время, когда я отвечал на этот вопрос. это было по-другому. позже вопрос был отредактирован.

Ответ №2:

Отредактировано

Функция сокращения не работает для меня с момента ввода для локального, в то время как функциональный блок работает идеально, но при создании jsFiddle обе функции работают нормально jsFiddle здесь

 $(document).ready(function(){
    $("#image").click(function(e){
        x=e.pageX;
        alert(x);
    });
});

Комментарии:

1. Код, совместно используемый OP, работает нормально.. Зачем отвечать, если да?

2. На самом деле, этот код не работал для меня.. Итак, я реализовал свой… !!! Кстати, спасибо за отрицательный голос.

3. Что не работало? Я поделился скрипкой в комментариях под вопросом.. Проверьте это…

4. Я скопировал приведенный выше код на свой компьютер и проверил, но я тоже не получаю простого предупреждения. Но ваш jsFiddle работает! так что не уверен, в чем проблема в коде, который я скопировал ранее.

5. отладьте его, вы, кстати, разработчик!

Ответ №3:

 <!DOCTYPE html>
<html>
<body>


<p><strong>Tip:</strong> Try to click different places on image</p>
<img src="http://i164.photobucket.com/albums/u8/hemi1hemi/COLOR/COL9-6.jpg"  width="100" height="100"   onclick="showCoords(event)"/>
<p id="demo"></p>

<script>
function showCoords(event) {
var x = event.clientX;
var y = event.clientY;
var coords = "X coords: "   x   ", Y coords: "   y;
document.getElementById("demo").innerHTML = coords;
}
</script>                
     </body>
        </html>