Сохранение координат щелчка мышью с ЦЕНТРОМ click.box в качестве источника

Question

Сохранение координат щелчка мышью с ЦЕНТРОМ click.box в качестве источника

0

Я пытаюсь написать биты кода на веб-странице html, так что, когда пользователь нажимает мышь внутри моего ClickBox, координаты X и Y сохраняются, а затем отправляются в мою базу данных.

Но пока, обработчик кликов... Вот как далеко я получил:

<body>
    <div id = "ClickBox" style = "left:100px;"> </div>
</body>



<script>
    $( document ).ready( function(e)
    {
            $( '#ClickBox' ).click( function(e)
        {
                alert( e.pageX + ' , ' + e.pageY );
        });
    });
</script>



<style type="text/css">
     #ClickBox { width:640px; height:480px; cursor:pointer; background:#2f2f2f; top:50px; color:#fff; font:bold 12px Arial; }
</style>

Он работает, но отображает координаты щелчка таким образом, что очевидно, что происхождение не является центральным или верхним левым углом моего ClickBox. Как изменить эти фрагменты, так что независимо от того, где мой ClickBox находится на моей странице, я всегда получаю точные координаты с центром моего ClickBox будучи начало координат?

Заранее спасибо,

Joshua 17 фев. 2014, в 11:51

Источник

1

Получите также координаты и показатели вашего clickbox - после этого это пара простых математических операций.
CBroe 17 фев. 2014, в 10:12

Теги:

php

javascript

jquery

html

css

3 ответа

1

Вам нужно удалить смещение div:

демонстрация

$( '#ClickBox' ).click( function(e){
    var coordX = e.pageX - $(this).offset().left,
        coordY = e.pageY - $(this).offset().top;
    alert( coordX + ' , ' + coordY );
});

enyce12 17 фев. 2014, в 09:05

0

Спасибо, но знаете ли вы, почему в демоверсии координаты отображаются как целые числа, тогда как в моем браузере как с плавающей запятой, с довольно большим количеством десятичных цифр ?!
Joshua 17 фев. 2014, в 13:12
0

@ enyce12 ваш код показывает предупреждение с координатами x и y, но мне нужно текстовое поле при щелчке, а когда я сохраняю что-то в текстовом поле и отправляю, оно должно сохраняться в db, а также показываться в поле с некоторым указателем и при наведении курсора или нажатии на него обувь, которая сохраняет ценность
Muddasir Abbas 12 нояб. 2015, в 06:30

1

e.pageX и a.pageY - позиция четырех курсоров на странице, а не отдельный div.

но вы можете получить положение мыши в div, удаляя верхнее и левое расстояние вашего div от тела

Ajouve 17 фев. 2014, в 07:56

Ещё вопросы

Получите также координаты и показатели вашего clickbox - после этого это пара простых математических операций.
Спасибо, но знаете ли вы, почему в демоверсии координаты отображаются как целые числа, тогда как в моем браузере как с плавающей запятой, с довольно большим количеством десятичных цифр ?!
@ enyce12 ваш код показывает предупреждение с координатами x и y, но мне нужно текстовое поле при щелчке, а когда я сохраняю что-то в текстовом поле и отправляю, оно должно сохраняться в db, а также показываться в поле с некоторым указателем и при наведении курсора или нажатии на него обувь, которая сохраняет ценность

Gareth Mula · Accepted Answer · 2014-02-17T07-28-00.000Z

Координаты относительно верхнего и левого.

coordX = e.pageX - $('#clickbox').offset().left;
coordY = e.pageY - $('#clickbox').offset().top;

Получить координаты с CENTER из Clickbox как источник

coordX = e.pageX - $('#clickbox').offset().left - ($('#clickbox').width() * 0.5);
coordY = e.pageY - $('#clickbox').offset().top - ($('#clickbox').height() * 0.5);