JQuery динамически клонирует html-элемент при касании, а затем получает события touchmove

У меня есть некоторые элементы (виджеты) в div с именем tools. Когда я нажимаю на эти элементы, я хочу перетаскивать их, но не напрямую. Я клонирую элемент в новый элемент с именем newnode, и это то, что я хочу перетаскивать в редакторе.

Трюк, который работает на рабочем столе, заключается в том, чтобы инициировать событие для нового элемента, просто $("#newnode").trigger(e);

$("#tools").on("mousedown touchstart",".widgets", function( e ) {
    InitialX=$(this).offset().left;
    InitialY=$(this).offset().top;
    $("#newnode").css("left",InitialX);
    $("#newnode").css("top",InitialY);
    $("#newnode").css("width",$(this).width());
    $("#newnode").css("height",$(this).height());
    $("#newnode>svg").html($($(this).find("g")[0]).clone());
    $("#newnode").show();
    $("#newnode").trigger(e);            
});

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

Я также добавил этот код, чтобы увидеть, что происходит с событиями, и да, старые события отправляются на неклонированный элемент.

$("#tools").on("blur focus focusin focusout load resize scroll unload click " +
"dblclick mousedown mouseup mousemove mouseover mouseout mouseenter " + 
 "mouseleave change select submit keydown keypress keyup error" +
 "touchstart touchend touchmove", ".widgets",function(e){
    console.info(e.type);
});

#newnode имеет z-index: 100000; заставить быть над исходным элементом.

чтобы увидеть пример на jsfiddle:

https://jsfiddle.net/hamboy75/v0br1cq6/44/

Если вы на компьютере, переключитесь на мобильный в инспекторе, и вы увидите, как он отличается в журнале. Просто нажмите на меню (дублированное появится в сером цвете), не отжимая немного подвигайте мышью.

При просмотре как компьютер newnode будет получать события. При просмотре в качестве мобильного виджет будет получать события.

Пробовали ли вы .off() отвязать прикрепленные события для вновь созданных узлов? api.jquery.com/off

artuc 13.12.2020 14:36

мне просто нужны события в новом созданном элементе, я не могу отключить инструменты/виджет. Я зафиксировал все события, чтобы увидеть, кто их получал

Hamboy75 13.12.2020 14:38

Можете ли вы создать простой jsfiddle?

artuc 13.12.2020 14:40

@artuc "образец"

Flash Thunder 13.12.2020 14:45

@Flash Thunder Я имел в виду * не всю страницу, а ее простую версию. Но вы правы, образец был бы лучше.

artuc 13.12.2020 14:47

я пытаюсь, дай мне пару минут :)

Hamboy75 13.12.2020 14:48
jsfiddle.net/hamboy75/v0br1cq6/44
Hamboy75 13.12.2020 15:02

наконец, я изменил все коды и создал свою собственную систему перетаскивания, как примечание для будущих читателей.. не теряйте время с библиотеками перетаскивания, создайте свои собственные методы :). При этом вы решаете, какой объект является тем, который вы перемещаете, получая все события от родителя.

Hamboy75 13.12.2020 19:21
Поведение ключевого слова "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) для оценки ваших знаний,...
4
8
175
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Наконец я нашел решение, которое работает для моих нужд, даже если оно не совсем то, что я хотел (я хотел получать все события в новом клонированном элементе). Вместо добавления следующей строки для получения событий в элементе #newnode

$("#newnode").trigger(e);

я использую следующий код для получения событий на #tools>.widgets, и если #newnode виден, повторно отправьте ему события с помощью триггера.

$("#tools").on("mouseup mousedown mousemove touchstart touchend touchmove touchcancel", ".widgets",function(e){
     if ($("#newnode").is(":visible"))
        $("#newnode").trigger(e);
});

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