Я использовал этот замечательный плагин с 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, чтобы исправить эту проблему.
Я не уверен, следует ли делать запрос на перенос с этими изменениями.
У меня такая же проблема, хром 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 есть простое и элегантное решение:
$('.panzoom a').on('mousedown touchstart', function( e ) {
e.stopImmediatePropagation();
});
Это не требует изменений самой библиотеки.
Привет @ glen-84
Да, preventDefault предотвратит действие по умолчанию. Но это также предотвратит отправку mouseDown дочернего элемента при отправке и прослушивании pointerDown.
В chrome 55 теперь отправляется pointerDown, а Microsoft Edge уже реализует pointerDown с самого начала.
В моем случае panzoom слушается pointerDown, а потомки слушают mouseDown.
Вот мой jsbin для него:
@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
Самый полезный комментарий
Рад помочь!
Всем, кому это тоже нужно, вот прямая ссылка:
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"}