What causes "mouse event doesn't have a target" in yewstack/yew?

Skip targetless events: `let Some(target) = e.target() else { return; };`

mouse event doesn't have a target

Error message

mouse event doesn't have a target

What it means

This panic is `.expect("mouse event doesn't have a target")` on `e.target()` in the mousemove closure of Yew 0.23's web-sys guide (note the closure now annotates `|e: MouseEvent|`). `MouseEvent::target()` returns `Option<EventTarget>`; None occurs only for programmatic events that were never dispatched on a node — real mousemove events delivered to a `set_onmousemove` handler always carry a target.

Source

Thrown at website/versioned_docs/version-0.23/concepts/basic-web-technologies/web-sys.mdx:172

version = "0.3"
# We need to enable all the web-sys features we want to use!
features = [
    "console",
    "Document",
    "HtmlElement",
    "MouseEvent",
    "DomRect",
]
```

```rust ,no_run
use wasm_bindgen::{prelude::Closure, JsCast};
use web_sys::{console, Document, HtmlElement, MouseEvent};

let mousemove = Closure::<dyn Fn(MouseEvent)>::wrap(Box::new(|e: MouseEvent| {
    let rect = e
        .target()
        .expect("mouse event doesn't have a target")
        .dyn_into::<HtmlElement>()
        .expect("event target should be of type HtmlElement")
        .get_bounding_client_rect();
    let x = (e.client_x() as f64) - rect.left();
    let y = (e.client_y() as f64) - rect.top();
    console::log_1(&format!("Left? : {} ; Top? : {}", x, y).into());
}));

Document::new()
    .expect("global document not set")
    .get_element_by_id("mousemoveme")
    .expect("element with id `mousemoveme` not present")
    .unchecked_into::<HtmlElement>()
    .set_onmousemove(mousemove.as_ref().dyn_ref());

// we now need to save the `mousemove` Closure so that when
// this event fires the closure is still in memory.
```

View on GitHub (pinned to 0e4a05472f)

Solutions

Skip targetless events: `let Some(target) = e.target() else { return; };`
Prefer `e.current_target()` for coordinates relative to the bound element — always present and always that element
In tests, dispatch mousemove from a real element so the target is set

Example fix

// before
let rect = e
    .target()
    .expect("mouse event doesn't have a target")
    .dyn_into::<HtmlElement>()
    .expect("event target should be of type HtmlElement")
    .get_bounding_client_rect();

// after
let rect = e
    .current_target()
    .dyn_into::<HtmlElement>()
    .ok()?
    .get_bounding_client_rect();

Defensive patterns

Strategy: validation

Validate before calling

let mousemove = Closure::<dyn Fn(MouseEvent)>::wrap(Box::new(|e: MouseEvent| {
    let Some(target) = e.target() else {
        return;
    };
    let _ = target;
}));

Type guard

use wasm_bindgen::JsCast;
use web_sys::{EventTarget, HtmlElement, MouseEvent};

fn target_element(e: &MouseEvent) -> Option<HtmlElement> {
    e.target()?.dyn_into::<HtmlElement>().ok()
}

Prevention

Use current_target() for listener-relative coordinate math
let-else skip targetless events instead of expect
Dispatch synthetic mousemove from a real element in tests

When it happens

Trigger: Invoking the closure directly in a test with `MouseEvent::new().unwrap()` (no dispatch, target None); routing synthetic mouse events through a custom dispatcher that never assigns targets.

Common situations: Copy-pasting the 0.23 web-sys.mdx coordinate snippet into examples or test harnesses that fabricate events instead of simulating real pointer input.

Related errors

AI-assisted analysis of yewstack/yew@0e4a05472f (2026-08-22). Data as JSON: /api/errors/bfa3234ac4640e26. Report an issue: GitHub.