I have a setup where there is a custom behavior attached to a container, say,
list. I add a
mousedown event listener to the container to capture an interaction which does a “reorder in place”. This is done using
addEventListener on the container. The container in turn contains elements inside of which multiple buttons / widgets controlled by Stimulus are present. So the structure is roughly this:
<div class="list"> <div class="list-item"><!-- this item become draggable=true after the mousedown behavior on "list" completes --> <a href="..." data-controller="magic_widget" data-action=""mousedown->magic_widget#activate"> ... </a> </div> </div>
mousedown handler on “list” is configured in such a way that it will look for
closest with the class of “list” and will engage the reorderable behavior only if one is found. The odd thing is that the “mousedown” action on the anchor element in this case is not detected. So it seems as if the Stimulus event listener is installed on, say,
document and the event is not bubbling from the element, but instead is handled after it reaches the listener on “list”.
Is there anything peculiar I should be aware of regarding where event listeners are added in Stimulus for the actions?