onclick events in svg stop working

[zeromold]

When using panzoom.js onclick events in svgs are intercepted by panzoom and not passed to the interactive svg.

[dominicdev]

same

[vincerubinetti]

Same. It's unfortunate. It's a good library, but I need to be able to attach other functionality to the sub-components of the SVG, and this seems to prevent that.

[rbonomo]

See here to handle event bubbling with this library. Good to know in general: https://github.com/anvaka/panzoom/issues/107

[rbonomo]

@vincerubinetti

[vincerubinetti]

@rbonomo I'm aware of stopPropagation. Was the first thing I tried it and it didn't work. Here is a reduced test case using React:

https://codesandbox.io/s/condescending-antonelli-qx5p3

It seems though, that if you attach your event to the object in the vanilla javascript way with addEventListener (uncomment the line in componentDidMount), it does actually stop the propagation. But unfortunately, attaching events this way is not the canonical way of doing things in React, and thus not compatible with the rest of my App. The proper way is to attach the onMouseDown React events to the component.

Do you have any idea why it would be the case that it wouldn't work doing it the React way, but it would work doing it the vanilla js way?

EDIT I should clarify, the real issue I'm talking about is that the stopPropagation doesn't prevent the panning from occurring when clicking and dragging a sub-element. The sub-element can still have events attached to it just fine. Perhaps this belongs in a separate issue.

[rbonomo]

@vincerubinetti Yeah man get outta React world for a sec and just do event.stopPropagation() in vanilla JS. I stopped using React myself and just use regular JS now so I can't really help you out there. Maybe it's because you're using React events? And the native event methods such as stopPropagation() are not in React events? Or are handled differently? You've put yourself into a whole different world by using React. For what?

[vincerubinetti]

React is used by millions of developers... You'd do well to make sure your library is compatible with it.

For what?

I'm not going to discuss the benefits of React here, but briefly: Because I'm building a large application that it would be impractical to build in vanilla javascript, which I have used for almost a decade before I started using React.

Take the advice or leave it (as you seem to want to).

[rbonomo]

https://www.youtube.com/watch?v=Yx6k6WR8GRs

[rbonomo]

It would be impractical without a component design model. React forces good design patterns. That's the benefit.

class PrecisionPointAssignmentWindow {
    constructor() {
        this.precisionPointListItems = [];

        this.element = $(`
            <div class="precision-point-assignment-window h-100">
                <div class="p-2 h-100 d-flex flex-column">
                    <h3>Precision Points</h3>
                    <p>At least two Precision Points are required to configure GPS functionality.</p>
                    <div class="precision-points-list flex-grow-1"></div>
                    <button class="add-precision-point-button btn btn-primary btn-block rounded-0">Add Precision Point</button>
                </div>
            </div>
        `).get()[0];

        this.listElement = this.element.querySelector('.precision-points-list');
        this.addPrecisionPointButton = this.element.querySelector('.add-precision-point-button');

        // Event Listeners
        this.addPrecisionPointButton.addEventListener('click', this.handleAddPrecisionPointButtonClick.bind(this));
    }

    handleAddPrecisionPointButtonClick(event) {
        const precisionPointListItem = new PrecisionPointListItem({
            precisionPoint: new PrecisionPoint()
        });
        this.listElement.appendChild(precisionPointListItem.element);
        this.precisionPointListItems.push(precisionPointListItem.element);
    }
}