How to stop events bubbling/propagating

[ch3pjw]

I've written a modal component with a background <div> and a <div> for the body of the modal, and I want to dismiss the modal when the background <div> is clicked, but not when the modal body is clicked.

By default, clicking on the modal body propagates the click event up to the background <div> and then the onclick handler for that gets triggered, closing the modal.

I can turn of event bubbling globally with

yew::events::set_event_bubbling(false);

which has the desired effect for this single interaction, but is a complete sledgehammer and breaks other interactions.

What's the cannonical way to do the equivalent of

<div onclick="event.preventDefault()">blah</div>

on a component/element rendered from html!?

My component view is like this:

fn view(&self, ctx: &Context<Self>) -> Html {
    let bg_on_click = ctx.link().callback(|_| Msg::BgClicked);
    html! {
        <div class="search-modal-bg" onclick={ bg_on_click }>
            <div class="modal-dialog">
               { "modal content here, please don't propagate click!" }
            </div>
        </div>
    }
}

Adding onclick={ e: web_sys::MouseEvent| e.prevent_default() } to the <div class="modal-dialog"> compiles, but does nothing, and I read somewhere in passing that this is ignored because yew does it's own stuff with events. (I can't find this reference any more.)

[WorldSEnder]

prevent_default does not prevent bubbling, it prevents the browser from executing the default action associated with that event. For example making a POST request when you submit a form. The method you are after is called stop_propagation and should work in yew.

[ch3pjw]

Much obliged, I just didn't find the right search term and/or my powers of observation failed me.