A few tools that I’m working on listen the click event and then show a border or outline around an element. This lets you see the size easily and make changes. But the click event is not stopped and things like checkboxes are selected.
Web Developer tools in most browsers have a similar “inspect” tool that helps lets you click on a item on the page and not trigger any event.
Use Case
Ferdinand is writing a HTML inspector tool and he wants to prevent the default event and event propagation. He uses the event.stopPropagation methods.
Unfortunately by the time JS is even aware of the event, the native widget has already consumed it, which makes it difficult to prevent the default action.
One option is to create your own controls that look like a native control, at which point you have full control over event propagation.
Following up on this a few years later, it seems like event.preventDefault is working on many elements, but not on keyboard events. Our use case is that we have a popover confirm dialog, and we want tab and shift-tab to bounce focus between the OK and Cancel buttons. However, because the popover is on top of a larger panel, the focus goes to an element underneath the dialog. We’ve gone so far as to add event.preventDefault to keydown, keyup and keypress on the document and window objects but that doesn’t do anything. Any thoughts on preventing default key events?