I’m encountering an issue with event listeners in JointJS within a Vue.js application, and I’m seeking assistance to address it.

The problem arises when using a double-click event listener (“cell:pointerdblclick”) within a method called initializeGraph, which I call each time there’s a change in the configuration.

Here’s the setup:

methods: {
initializeGraph () {
    // Graph initialization...

    // Adding the double-click event listener
    this.paper.on("cell:pointerdblclick", async (cellView) => {
        // Double-click event handling logic here...
    });
}
//Other methods
}

The issue is that each time I call initializeGraph(), a new instance of the double-click event listener is added. Consequently, when I double-click an element, the event fires multiple times, depending on the number of times initializeGraph() has been called.

I need a solution that prevents the event listener from incrementing with each call to initializeGraph() and ensures that the double-click event triggers only once regardless of how many times the method has been invoked.

Any guidance or assistance in resolving this issue would be greatly appreciated. Thank you for your help.

I attempted a solution that involve setting a boolean flag (doubleClickHandlerAttached) to track whether the event listener is already attached. However, this approach leads to another issue.

data() {
    return {
        doubleClickHandlerAttached: false, // Attempted solution
        // Other data properties...
    };
},
methods: {
    initializeGraph() {
        // Graph initialization...

        if (!this.doubleClickHandlerAttached) {
            // Adding the double-click event listener
            this.paper.on("cell:pointerdblclick", async (cellView) => {
                // Double-click event handling logic here...
                // Ensuring the event fires only once
                this.doubleClickHandlerAttached = true;
            });
        }
    }
}

When adding a new element to the graph and subsequently calling initializeGraph, the double-click event does not work because the event listener is disabled due to the doubleClickHandlerAttached variable being set to true.

I’m looking for guidance on how to maintain the functionality of the double-click event listener while preventing it from being duplicated and ensuring it triggers only once per element, regardless of the number of times initializeGraph is called after a graph update.