In Safari 4 windows, it does not seem possible to stop some key events from bubbling up to the browser in Javascript.
This question got pounced on for trying to stop F5 (a dubious design goal), but the technical problem remains... how do you stop certain key events from bubbling up in Safari 4? For example,
You can stop:
CTRL+T
CTRL+N
You cannot stop:
CTRL+F
F5
Interesting. My tests gave the same results as yours: I couldn't find a way to prevent the default action of CTRL+F in Safari 4 in Windows, which suggests it's a deliberate design decision. However, I did discover the probably useless fact that putting an alert in my keydown event handler prevented the search bar from appearing, regardless of whether I then cancelled the event default action.
Related
Is it possible to prevent the default action of the Escape key in an Electron app -- specifically, to prevent it from cancelling an in-progress drag and drop action in the Chrome window? See this fiddle for example -- if you drag and hold the div and then press the Esc key, the drag is cancelled, even though there is an event listener that calls e.preventDefault on the event: https://jsfiddle.net/82aL6gsy/
Does Electron (or Chrome) provide any lower-level or less restricted APIs that we can use to intercept this?
Update: please note that this question is about whether or not the mentioned functionality can be achieved, not about why or whether doing so would be a good idea.
After some investigation, I think the esc-cancels-drag-n-drop functionality may be implemented either as a special case within Chromium (although I couldn't find where), or as part of the desktop environment, in which case Chromium may not even see the event. In any case, there is no associated keydown event for the key press that cancels the drag, and I don't think there is any way to intercept this behaviour from JavaScript, even in Electron.
I have a webapp with an inner-pane inside an outer-window.
The user can zoom-in in the inner-pane via 2-finger pinch, without zooming-in the outer-window.
On Chrome on Android, the app works as expected.
But Safari on iOS device (iPad), zoomimg-in inside the inner pane, actually zooms-in the entire window, which is not the intended behaviour.
I read here that iphone/ipad can trigger unexpected events.
I want to find this event.
I remote-debug the webapp iOS Safari by connecting the iPad to a Macbook and debugging via Safari.
In Safari Web Inspector, Sources tab, Breakpoints section, I added All Events.
When I touch the pane, the code breaks as expected on the ontouchstart event, which is not the offending event.
I can add specific events to break on, by name.
But because I don't know which is the offending events, I want to break on all events except the ontouchstart event.
Is it possible to stop on all events in Safari except specified events?
Thanks
I did not find out if it is possible, to break on all events excluding specific event(s).
I recently found this link which comprehensively explains various breakpoint options in Safari.
The author of the link graciously answered my question:
Currently there is no way to exclude specific events.
In your scenario, is it really necessary to add listeners for all events, or is it a known list of specific events (e.g. all touch and mouse)?
If it's the latter, I'd suggest just adding a global event listener breakpoint for each event other than the one event you want to exclude.
Another option might be to configure an All Events global event listener breakpoint with a condition of something like window.event.type !== "..."
(note that this will only work in Safari Technology Preview 114 or newer).
p.s.
The reason for my question was an upstream offending event listener.
Because the problem was in an event listener that is upstream to the target event, it wouldn't have helped to break on all events excluding specific event(s).
I ended-up solving my original problem by applying addEventListener with passive = false, and using preventDefault() to prevent from triggering the upstream event handlers in the bubbling stage.
I'm trying to stop the user from going back in my web app. For this I tried catching the window.onpopstate and added e.preventDefault to cancel the back button effect.
But it doesn't seems to happen.
window.addEventListener('popstate',function(e){
console.log(e); e.preventDefault();
});
Is it not possible to prevent the popstate event of browser? Or am I doing something wrong?
According to this documentation, the popstate event is not cancellable:
Specification: HTML5 Interface: PopStateEvent Bubbles:
Yes
Cancelable: No Target: defaultView Default Action: None
First off "not possible" is never an acceptable answer.
Secondly you can compensate for popstate bugs. In example my rich editor has to constantly compensate for the lazy-bastard key: Backspace. It's not a valid key for a back button (just like spacebar for "page downing") but people impose their personal preferences upon the world instead of adding a browser extension so when people press it sometimes the popstate is triggered instead of the editor removing whatever character is to the left of the keyboard caret.
The following code (dependencies in my platform's documentation) detects when the popstate bug is triggered, slaps it in the face with a e.preventDefault(); and then fixes the address bar address with history.go(1);. The person using the editor doesn't notice anything happened as the browser was not allowed to manipulate the DOM. This code is minimal (other people may be compensating for this bug in various contexts) and I've only tested this in Gecko/Firefox currently so be sure to test Blink, Presto, Trident and WebKit based browsers as well.
window.onpopstate = function(e)
{
if (id_('editor') && is_node_parent(document.activeElement,id_('editor')))
{
e.preventDefault();
history.go(1);
}
}
I would like for a button to react to 'touches' on a touch screen, and 'clicks' on a non-touch screen. In case of a touch screen, I only want the touchstart handler to direct my flow and prevent the system from further handling the click event.
For this, I added two event listeners to my button. One listens for touchstart events. Once a touchstart has been detected, it uses event.preventDefault() to cancel the click event.
The code below on a touchscreen in Chrome, Opera and Android browsers achieves the desired result:
- one alert saying "touch".
However, in Firefox both events are detected, in spite of the preventDefault() in the touchstart handler:
two alerts... first one says "touch", followed by a second alert saying "click".
lginButton.addEventListener('touchstart', function(event) {
event.preventDefault();
alert("touch");
}, false);
lginButton.addEventListener('click', function(event) {
alert("click");
}, false);
Why is this happening and how can I achieve the desired results in all browsers?
I am currently unable to test. But based on your feedback it appears that Firefox is in fact not following the spec on events found here. I was about to find 4-5 bug logs on Mozilla that discussed this very topic, and finally found one that resolved the issue here https://bugzilla.mozilla.org/show_bug.cgi?id=977226. Definitely check to make sure you have the current version of firefox. And if you do it may be worth opening a new bug with mozilla on this. In the meantime you can set up a conditional inside of your touchstart event handler that detects the event type and handles touch and mouse events differently.. And then further adding more conditionals within you click conditional to handle browser and OS version. which is super bad practice, but would keep you going until a patch was implemented.
I am implementing keyboard shortcuts on a website, these shortcuts are similar to Gmail. The problem I am facing with Firefox 6.0 is that, the quick find starts immediately as soon as I type any letter. If I open Gmail, the quick find only opens when I press apostrophe (').
Because of this, none of the keyboard shortcuts works on the website. It is working fine on all the other browsers and other versions of Firefox.
Should I use event.preventDefault() for each character. I don't want to do that, is there any other work around?
Using event.preventDefault() on each key event whose default action you want to prevent is exactly the right thing to do here. Why do you not want to do that?
It's hard to tell without looking at your code, but it seems that you are intercepting the keypress event, when you should be intercepting the keydown event. If you use event.preventDefault() on the keydown event, it should prevent the default browser behaviour connected to that key.