Dynamically activate/ deactivate event listener on DOMs

[HametAl]

Hi Jourdain

I want to activate mousemove event on Vcontainer dynamically. I am able to activate it statically using either of following codes:

VContainer (__events=[("my_event", 'mousemove")], my_event= (on_mouse_move,'[$event.offsetX]'))

Or

VContainer (mousemove=(on_mouse_move,'[$event.offsetX]'))

Or

def listener (event): event_result={} if event=="mousemove": event_result=(on_mouse_move, '[$event.offsetX]') return event_result VContainer (**listener("mousemove"))

But is there any way to put the listener dynamically off and on? Or dynamically change from mousemove to click or any other events?

Thanks and regards

[bourdaisj]

Hi @HametAl ,
AFAIK, it is not possible to disable event listener in Vue.js. But in trame you can workaround this by using a trigger, and conditionally call it in the UI template.
Example:

from trame.app import get_server
from trame.widgets import vuetify3

server = get_server()
state = server.state
ctrl = server.controller

state.mouse_move_on = False


def toggle_mouse_move(self):
    state.mouse_move_on = not self.state.mouse_move_on
    print(state.mouse_move_on)


@ctrl.trigger("test")
def on_mouse_move(self, *args, **kwargs):
    print(args)
    print(kwargs)


vuetify3.VBtn("toggle mouse move", click=toggle_mouse_move)

with vuetify3.VContainer(
    fluid=True,
    classes="pa-0 fill-height",
    mousemove="mouse_move_on && trigger('test', [$event])",
):
    # your UI ...
    pass

With, this code, not network bandwidth will be used to the callback on the trame server.

HTH,

[jourdain]

Another option is to use another DOM element that always have the mousemove but you use a v_if to enable/disable that specific element.