Альтернатива событию Click или как обработать двойной клик?

Question

[pwndkot]

День добрый.

Ситуация такая, есть API для камеры,у этой API есть функционал перемещение камеры по клику на видео.
Подключается она примерно таким способом, обрабатывается событием ОнКлик (внутри видео) и уходит на обработку через jQ :

spoiler

<div class="col s12 center-align" id="videocontainer">
     <img src="" id="video" class="responsive-img" data-camid='' onclick=ptzCenter("center",this)>
</div>

В jQ я снова обрабатываю событие Клика, после чего идёт перерасчёт размеров (высота/ширина) и идёт отправка этих данных через Ajax, НОООО, т.к. 2 раза обрабатывается событие Клик,то Ajax начинает сходить сума,а точнее делать то,что от него требуется и Ajax запросы отправляются в геометрической прогрессии. (кол-во запросов на скрине за 1 клик)

spoiler

function ptzCenter(camid) {
  $('#video').on('click', function(el){
  console.log( $(this).text("test"));
    camid = $.cookie('lastcam')
    var image = $(el.currentTarget.parentElement).find('img')[0]
    hcoef = image.naturalWidth/image.clientWidth
    wcoef = image.naturalHeight/image.clientHeight
    var fx = Math.round(el.offsetX * wcoef)
    var fy = Math.round(el.offsetY * hcoef)
    var request = $.ajax({
      url:'/axisptz',
      data:'camid=' + camid + '&posx=' + fx + '&posy=' + fy + '&httpapi=1&ptzCenter=1&',
    })
   return false; // Подобное решение отмены потока Ajax запросов 
   })
  }

Скрин запросов :

spoiler

Есть ли какая-то альтернатива Клику ? (mousedown не помог, помог только вызов alert`а, но это не решение,а скорее костыль) или же можно как-то адекватно прекратить Ajax запросы? Что-то аля xhr.abort(); и return false; не помогли (xhr не определен, а при return false вообще вырубает другие скрипты или я просто очень криво его выполняю)

Если кому-то важна обработка на Джанге,то вот:

spoiler

if request.GET.get('ptzCenter') == '1':
                if request.GET.get('center') and request.GET.get('fx') and request.GET.get('fy'):
                    center = request.GET.get('center')
                    x = request.GET.get('fx')
                    y - request.GET.get('fy')
                    logaction = 'Перемещение по клику'
                else:
                    fx = 0
                    fy = 0
                params = {'center': fx + fy }
                r = requests.get('http://' + camip + ptzpostfix, params=params)
                return HttpResponse('Ok')

Answer 1

[Владимир Проскурин]

Выполняйте ajax запрос через debounce функцию.
UPD: А, у вас же получается слушается два события. Одно в onclick атрибуте, второе появляется при каждом клике. Почему вам не убрать атрибут onclick и не написать просто вот так, без функции

$('#video').on('click', function(el){
  console.log( $(this).text("test"));
    camid = $.cookie('lastcam')
    var image = $(el.currentTarget.parentElement).find('img')[0]
    hcoef = image.naturalWidth/image.clientWidth
    wcoef = image.naturalHeight/image.clientHeight
    var fx = Math.round(el.offsetX * wcoef)
    var fy = Math.round(el.offsetY * hcoef)
    var request = $.ajax({
      url:'/axisptz',
      data:'camid=' + camid + '&posx=' + fx + '&posy=' + fy + '&httpapi=1&ptzCenter=1&',
    })
   return false; // Подобное решение отмены потока Ajax запросов 
   })

Comments

[pwndkot]

Да,именно в этом у меня и проблема, что два события ОнКлик,по сути и они и делают кучу запросов,а вот альтернативу найти не могу. Если убрать onclick из html, то тут 2 НО:
1. Как это вообще можно корректно записать, без использования тех же классов, так и не придумал.
2. С точки зрения API,я так понял, ей требуется обработать этот клик в HTML, что бы в DOM ушло всё адекватно.

п.с. Делал без расчета размеров, коротким JS`ом

function ptzCenter(id){
  console.log(id);

Что-то такое было (написал по памяти) в консоль по уму уходило. Но что бы рассчитать корректно размеры изображения и передать их камере (что бы она поняла точно куда кликнули) нужно обработать событие клика,а знаний,если честно, не хватает что бы понять как это сделать(

[Владимир Проскурин]

pwndkot, я не знаю, от куда и зачем вы берете offsetX/Y, поэтому взял их с getBoundingClientRect.
https://jsfiddle.net/5mxcpzv1/

[pwndkot]

Владимир Проскурин, offset использую для работы с Web API, а именно это - отступ курсора мыши по оси X от края целевого DOM узла. Но ваше решение интересно,попробую его использовать. Так же мне посоветовали убрать первую строку
$('#video').on('click', function(el)
Что бы лишний раз клик не обрабатывать,но к сожалению это строка нужна,т.к. по фильтру EL у меня идёт расчёт координат,а если убрать первую строку,то он пишет что El не определен, так что ваше метод очень интересен,пойду пробовать)

[Владимир Проскурин]

pwndkot, о, мышь, точно
https://jsfiddle.net/5mxcpzv1/2/

[pwndkot]

Владимир Проскурин, Что бы не пытался сделать,суть одна и та же,для функционирования прописывается событие клик и в скрипте и в хтмл. Еслить убрать Клик в скрипте, то реакции на клик нет, если убрать строку $('#video').on('click',function(el)
То он ругается что Target/Element (на ваш или мой вариант,без разницы,т.к. они привязаны к функции .on(function() ) жестко.

Получается мне или как-то в HTML надо написать это всё без onclick (аля PtzCenter = ("center", this), но корректно),либо как-то обходить или полностью jQ код переписывать каким-то более корректным методом. Хотелось бы попытаться сначала обойтись малой кровью,всё же)

[Владимир Проскурин]

pwndkot, не будет никто ругаться, если вы сделаете в точности как у меня. Уберет onclick в html, и уберете метод ptzCenter, оставив только jQuery. В моем примере не target, а delegateTarget - это аналог $(this)[0], т.е. сам кликнутый элемент #video

[pwndkot]

Владимир Проскурин, Таки победил это, найдя пример на одном из сайтов по JS, статья с примером по перемещению по клику объекта (если кому понадобится) https://learn.javascript.ru/obtaining-event-object
А код вышел такой примерно :

spoiler

function ptzCenter(id) {
  video.onclick = function(ev){
    camid = $.cookie('lastcam')
    var image = $(ev.currentTarget.parentElement).find('img')[0]

    hcoef = image.naturalWidth/image.clientWidth
    wcoef = image.naturalHeight/image.clientHeight
    var fx = Math.round(ev.offsetX * wcoef)
    var fy = Math.round(ev.offsetY * hcoef)
    var request = $.ajax({
      url:'/axisptz',
      data:'camid=' + camid + '&posx=' + fx + '&posy=' + fy + '&httpapi=1&ptzCenter=1&',
    })
   }
 }