Panzoom: Panzoom скрывает событие mousedown для подпунктов в последней версии Chrome

Созданный на 7 дек. 2016  ·  12Комментарии  ·  Источник: timmywil/panzoom

Я использовал этот замечательный плагин с jquery.draggable для панорамирования / масштабирования диаграммы с перетаскиваемыми узлами,
но после последнего обновления Chrome узлы становятся недоступными для перетаскивания.

Небольшое расследование показало, что Chrome что-то изменил с помощью события pointerdown,
так что теперь плагин panzoom отвечает на событие pointerdown дочернего узла до того, как оно сработает.
Panzoom подавляет событие указателя вниз, и по какой-то причине после этого события mousedown не происходит, поэтому перетаскивание не начинается.

jquery.panzoom.js v3.2.2
jquery 3.1.0 или v1.11.3
jqueryui 1.12.0 или 1.10.3
Chrome 55.0.2883.75 (64-разрядная версия) Ubuntu 16.04

Вот демо
http://codepen.io/yurigor/pen/yVjeGB

Я добавил опцию ignoreChildrensEvents, чтобы исправить эту проблему.
Я не уверен, следует ли делать запрос на перенос с этими изменениями.

Самый полезный комментарий

Рад помочь!
Всем, кому это тоже нужно, вот прямая ссылка:
https://github.com/YuriGor/jquery.panzoom/tree/ignoreChildrensEvents/dist

@timmywil , если вы хотите объединить мои изменения, помогите мне с ворчанием, пожалуйста.
Я начинаю загрузку
grunt watch:dev
но это не работает.
На http: // localhost : 35711 / у меня есть
{"tinylr":"Welcome","version":"0.2.1"}
и в
http: // локальный: 35711 / тест / index.html
или
http: // локальный: 35711 / демо / index.html
у меня есть
{"error":"not_found","reason":"no such route"}

Все 12 Комментарий

У меня такая же проблема, хром v55. У меня есть перетаскиваемое окно, и я хочу получать события mousedown для детей. Что вы сделали, чтобы это исправить? у вас есть ветка с изменением, я пока застрял.

нашел вашу ветку, и она очень хорошо решает мою проблему. Спасибо YuriGor это замечательно

Рад помочь!
Всем, кому это тоже нужно, вот прямая ссылка:
https://github.com/YuriGor/jquery.panzoom/tree/ignoreChildrensEvents/dist

@timmywil , если вы хотите объединить мои изменения, помогите мне с ворчанием, пожалуйста.
Я начинаю загрузку
grunt watch:dev
но это не работает.
На http: // localhost : 35711 / у меня есть
{"tinylr":"Welcome","version":"0.2.1"}
и в
http: // локальный: 35711 / тест / index.html
или
http: // локальный: 35711 / демо / index.html
у меня есть
{"error":"not_found","reason":"no such route"}

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

@timmywil Можно ли выпустить новую версию с этой опцией?

Изменить: на самом деле у меня такая же проблема, как и у romi45. 😞

Изменить 2: возможность перечисления элементов, которые следует игнорировать, будет полезна, например:

ignoreChildEventsFrom: [".things-to-ignore1", ".things-to-ignore2"]

Изменить 3: Думаю, я нашел решение в FAQ «Как заставить работать ссылки, если они находятся в элементе Panzoom?».

что я делаю, так это закомментирую preventDefault в строке 969. preventDefault заблокирует событие от достижения его дочерних элементов.

@akhnaz ,

Насколько я понимаю, preventDefault предотвратит действие по умолчанию, связанное с элементом (дочерним элементом или самим элементом panzoom), а stopPropagation остановит всплытие событий до родительского элемента.

В FAQ есть простое и элегантное решение:


  1. Как заставить работать ссылки, если они находятся в элементе Panzoom? пример
  • Распространение событий останавливается для событий mousedown и touchstart, чтобы разрешить использование элементов Panzoom в элементах Panzoom. Чтобы исправить ссылки, привяжите обработчик события, который предотвращает попадание события в обработчик Panzoom:
$('.panzoom a').on('mousedown touchstart', function( e ) {
  e.stopImmediatePropagation();
});

Это не требует изменений самой библиотеки.

Привет @ glen-84

Да, preventDefault предотвратит действие по умолчанию. Но это также предотвратит отправку mouseDown дочернего элемента при отправке и прослушивании pointerDown.

В chrome 55 теперь отправляется pointerDown, а Microsoft Edge уже реализует pointerDown с самого начала.

В моем случае panzoom слушается pointerDown, а потомки слушают mouseDown.

Вот мой jsbin для него:

https://jsbin.com/yozotuxina/edit?js

@akhnaz ,

Вы можете просто прослушать pointerdown на дочернем элементе и остановить немедленное распространение ...

https://jsbin.com/sicapuledo/edit?html , js, консоль, вывод

Привет,

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

У меня действительно нет времени правильно разветвляться и делать пул-реквест. Пожалуйста, включите это небольшое улучшение и запрос на извлечение в основной репозиторий.

Вот код, обновленный из строк 959 вашей вилки:

if (!options.disablePan || !options.disableZoom) {
    events[ str_start ] = function(e) {
        if(options.ignoreChildrensEvents) {
            if($.isArray(options.ignoreChildrensEvents)) {
                if(options.ignoreChildrensEvents.find(function(c){return $(e.target).hasClass(c);})) {
                    return;
                }
            }
            else if(e.target !== this){
                return;
            }
        }

        var touches;
                /* rest of code */

Параметр ignoreChildrensEvents может быть определен как true, false или ['child-class1', 'child-class2'].

С Уважением

пожалуйста, выпустите более новую версию, содержащую ignoreChildrensEvents

Была ли эта страница полезной?
0 / 5 - 0 рейтинги