{"record":{"id":"7d9ad458aea92486","repo":"yewstack/yew","slug":"event-target-should-be-of-type-htmlelement","errorCode":null,"errorMessage":"event target should be of type HtmlElement","messagePattern":"event target should be of type HtmlElement","errorType":"panic","errorClass":null,"httpStatus":null,"severity":"warning","filePath":"website/versioned_docs/version-0.21/concepts/basic-web-technologies/web-sys.mdx","lineNumber":175,"sourceCode":"features = [\n    \"console\",\n    \"Document\",\n    \"HtmlElement\",\n    \"MouseEvent\",\n    \"DomRect\",\n]\n```\n\n```rust ,no_run\nuse wasm_bindgen::{prelude::Closure, JsCast};\nuse web_sys::{console, Document, HtmlElement, MouseEvent};\n\nlet mousemove = Closure::<dyn Fn(MouseEvent)>::wrap(Box::new(|e| {\n    let rect = e\n        .target()\n        .expect(\"mouse event doesn't have a target\")\n        .dyn_into::<HtmlElement>()\n        .expect(\"event target should be of type HtmlElement\")\n        .get_bounding_client_rect();\n    let x = (e.client_x() as f64) - rect.left();\n    let y = (e.client_y() as f64) - rect.top();\n    console::log_1(&format!(\"Left? : {} ; Top? : {}\", x, y).into());\n}));\n\nDocument::new()\n    .expect(\"global document not set\")\n    .get_element_by_id(\"mousemoveme\")\n    .expect(\"element with id `mousemoveme` not present\")\n    .unchecked_into::<HtmlElement>()\n    .set_onmousemove(mousemove.as_ref().dyn_ref());\n\n// we now need to save the `mousemove` Closure so that when\n// this event fires the closure is still in memory.\n```\n\nThis version is much more verbose, but you will probably notice part of that is because of failure","sourceCodeStart":157,"sourceCodeEnd":193,"githubUrl":"https://github.com/yewstack/yew/blob/0e4a05472fac4e5fce1befe60fa4a1e43a36b6a3/website/versioned_docs/version-0.21/concepts/basic-web-technologies/web-sys.mdx#L157-L193","documentation":"After obtaining the target, the tutorial casts it with dyn_into::<HtmlElement>() and expects success. The cast fails whenever the target is not an HtmlElement - most commonly an SVGElement: moving the pointer over an inline <svg> icon makes the SVG element the event target, and SVGElement does not inherit from HTMLElement. Document or Window targets fail the same way, and then the expect panics.","triggerScenarios":"Capturing mouse position while the pointer is over inline SVG (icons, charts); targets that are Document/Window for certain event types; any event whose target is an Element but not an HtmlElement.","commonSituations":"Pages with SVG icon sets or chart libraries rendering SVG; copy-pasted tutorial code meeting real-world targets; events delegated at document level.","solutions":["Cast to web_sys::Element instead - get_bounding_client_rect() exists on Element and covers SVG and HTML alike","Or use dyn_ref::<HtmlElement>() with an if-let fallback instead of dyn_into + expect","Or bind to a known HtmlElement host and use current_target()","Test with the pointer over SVG content before shipping"],"exampleFix":"// before: panics whenever the pointer is over inline <svg>\nlet rect = e.target().unwrap()\n    .dyn_into::<HtmlElement>()\n    .expect(\"event target should be of type HtmlElement\")\n    .get_bounding_client_rect();\n\n// after: Element covers SVG and HTML elements alike\nlet rect = e.current_target()\n    .dyn_into::<web_sys::Element>()\n    .expect(\"listener is bound to an Element\")\n    .get_bounding_client_rect();","handlingStrategy":"type-guard","validationCode":null,"typeGuard":"fn as_html_element(target: &web_sys::EventTarget) -> Option<&web_sys::HtmlElement> {\n    target.dyn_ref::<web_sys::HtmlElement>()\n}","tryCatchPattern":null,"preventionTips":["Cast to web_sys::Element for geometry APIs like get_bounding_client_rect - it covers SVG too","Use dyn_ref + if-let instead of dyn_into + expect for event targets","Test pointer-tracking code with SVG content on the page"],"tags":["events","docs","web-sys","type-cast","svg"],"backgroundTag":"event-target-type-mismatch","analyzedSha":"0e4a05472fac4e5fce1befe60fa4a1e43a36b6a3","analyzedAt":"2026-08-22T21:16:31.212Z","schemaVersion":2},"datasetVersion":"2026-08-23T01:17:44.959Z"}