Bypassing DOM Event Bubbling Suppression for Popup Controls
Find Innovative SolutionsGenerate Solutions
Solution Overview
Problem
Existing browser technologies face challenges in rendering extensible popup controls and modal interactions, particularly with DOM click event bubbling suppression and iframe interactions, which hinder the effective display and dismissal of popup controls in web and mobile applications.
Innovation Solution
The technology provides systems and methods for rendering extensible browser executable components, including popup controls, modals, and autocompletes, by bypassing DOM click event bubbling suppression and enabling modal interaction between iframes and popup controls through mouseup and blur events, ensuring consistent and accessible user interface components across desktop and mobile devices.
Engineering Contradictions & Design Principles
Engineering Contradiction Analysis
1Device complexity
If DOM click event bubbling suppression is implemented for popup controls, then popup control rendering is simplified, but event propagation and iframe interactions are hindered
Solution Approach 1:
The patent segments the event handling approach by distinguishing between click events (which have bubbling suppression issues) and mouseup events (which provide reliable propagation). By using mouseup events as an alternative mechanism, the system achieves both simplified popup control rendering and reliable event propagation, particularly for dismissing popups when clicking outside them or when iframe interactions occur.
2Reliability
If standard DOM event handling is used, then event propagation works normally, but popup control dismissal and iframe interactions fail
Solution Approach 1:
The patent introduces mouseup events as an intermediary mechanism to bridge the gap between click events and popup control dismissal. Since mouseup events reliably propagate through the DOM tree unlike click events, they serve as an effective mediator for detecting when users click outside popup controls or interact with iframes, enabling proper popup dismissal while maintaining standard event propagation.
3Ease of operation
If click events are used for popup control interaction, then user interaction is straightforward, but event bubbling suppression prevents proper propagation
Solution Approach 1:
The patent dynamically selects between different event types based on the interaction context. For direct popup control interactions, click events remain appropriate. However, for detecting outside clicks and iframe interactions, the system dynamically switches to using mouseup events, which provide reliable propagation. This dynamic approach maintains ease of operation while preventing loss of event propagation information.
Data Source
AI summary
The technology disclosed describes systems and methods for implementing extensible browser executable components, such as popup controls for action, checkbox and radio button dropdown menus, modals, dialogs, date pickers and autocompletes. The disclosed technology systems and methods can also be used for rendering executable components for mobile application interfaces. The technology further discloses systems and methods for providing support for developers whose goal is to render specific implementations of browser executable components. The technology disclosed also describes systems and methods for bypassing suppression of DOM click event bubbling for a popup controls for action, checkbox and radio button dropdown menus, modals, dialogs, date pickers and autocompletes; and discloses systems and methods for implementing modal interaction between an iframe and a popup control.