Panzoom: Panzoom hides mousedown event of sub-items on latest Chrome

I am having the same issue, chrome v55. I have draggable window, and i want to get mousedown events for children What did you do to fix this? do you have a branch with the change, I'm stuck for now.

found your branch and it fixes my problem very very nicely. Thanks YuriGor this is wonderful

Happy to help!
Anybody, who also need it, here is a direct link:
https://github.com/YuriGor/jquery.panzoom/tree/ignoreChildrensEvents/dist

@timmywil, if you wish to merge my changes, help me with grunt please.
I start livereload by
grunt watch:dev
but it doesn't work.
At http://localhost:35711/ I have
{"tinylr":"Welcome","version":"0.2.1"}
and at
http://localhost:35711/test/index.html
or
http://localhost:35711/demo/index.html
I have
{"error":"not_found","reason":"no such route"}

Thanks a lot. this fix was not enough for me but i added some myself to fix it for my case. (i has multiple nested children some of them should be ignored and others should not)

@timmywil Is it possible to release a new version with this option?

Edit: Actually I have the same issue as romi45. 😞

Edit 2: An option to list which elements to ignore would be helpful, like:

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

Edit 3: I think I may have found the solution in the FAQ "How do I make links work if they're within a Panzoom element?".

what i do is to comment out the preventDefault at line 969. preventDefault will block the event from reaching its children.

@akhnaz,

From my understanding, preventDefault will prevent the default action associated with an element (a child or the panzoom element itself), and stopPropagation will stop events from bubbling up to a parent element.

There is a simple and elegant solution in the FAQ:

1. How do I make links work if they're within a Panzoom element? example

• Event propagation is stopped for mousedown and touchstart events in order to allow for Panzoom elements within Panzoom elements. To fix the links, bind an event handler that prevents the event from reaching the Panzoom handler:

$('.panzoom a').on('mousedown touchstart', function( e ) {
  e.stopImmediatePropagation();
});

This requires no changes to the library itself.

Hi @glen-84

Yes, preventDefault will prevent the default action. But, it will also prevent mouseDown from the child when pointerDown is being dispatched and listened.

In chrome 55 pointerDown is now dispatched and microsoft edge is already implement pointerDown from beginning.

In my case, panzoom is listened to pointerDown, and the children is listen to mouseDown.

Here is my jsbin for it:

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

@akhnaz,

You can just listen to pointerdown on the child and stop immediate propagation ...

https://jsbin.com/sicapuledo/edit?html,js,console,output

Hi,

I improved your feature a little. I override your option to a possible array of class. The goal is to only ignore events if childs have one of the listed class. Of course, just setting the value to true work as you implemented it.

I don't have really time to fork properly and make a pull request. Please include that small improvement and request for a pull into the main repository.

Here is the code updated from your fork lines 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 */

The the ignoreChildrensEvents option can be defined as true, false or ['child-class1', 'child-class2'].

Regards

please release a newer version contains ignoreChildrensEvents