touchend listener on document prevents listening for clicks on dom elements (web)

[lucasmerlin]

Describe the bug
Egui is registering a touchend event listener on the document and is calling preventdefault on the event. This prevents any touch interactions with dom elements shown on top of the canvas.

To Reproduce

Paste the following in the console on egui.rs (to create a simple html dialog):

let dialog = document.createElement("dialog");
let button = document.createElement("button");
button.innerHTML = "Hello";
dialog.appendChild(button);
button.onclick = () => alert("button click!!");
document.body.appendChild(dialog);
dialog.show()

Clicking the button now does nothing. (Make sure you enabled the device toolbar and set it to e.g. iPhone SE)

If we forcefully remove the egui touchend listener from document via

document.removeEventListener("touchend", getEventListeners(document).touchend[0].listener)

the button will become clickable.

Expected behavior
Egui shouldn't interfere with other dom elements. Maybe the touchend listener doesn't need preventDefault or it could be made configurable.

Additional context

The listener is added here:

egui/crates/eframe/src/web/events.rs

Line 92 in af404fe

install_touchend(runner_ref, &document)?;

• Related issue: Web demo loses mouse cursor position when dragging off the window #3157

[emilk]

The reason touchend is installed on document is so that egui is told of drags that start inside the canvas, but stops outside of it.

This should only be a problem if the button overlaps the canvas, due to

egui/crates/eframe/src/web/events.rs

Lines 529 to 532 in 770c82a

	runner_ref.add_event_listener(target, "touchend", |event: web_sys::TouchEvent, runner| {
	if let Some(pos) = primary_touch_pos(runner, &event) {
	if is_interested_in_pointer_event(runner.egui_ctx(), pos) {
	// First release mouse to click:

egui/crates/eframe/src/web/events.rs

Lines 425 to 427 in 770c82a

	fn is_interested_in_pointer_event(egui_ctx: &egui::Context, pos: egui::Pos2) -> bool {
	egui_ctx.input(|i| i.screen_rect().contains(pos) || i.pointer.any_down() || i.any_touches())
	}

The i.screen_rect().contains(pos) is what is causing the problem. If it could be replaced with a DOM-aware call ("is the touch above the canvas element?") we should be able to solve this. document.elementFromPoint looks promising for this.

[lucasmerlin]

@emilk Makes sense! I'll try to implement this