How exactly does event.preventDefault() affect the DOM? - javascript

Based on someone's advice I added this line $('body').on('touchstart', function(event){ event.preventDefault() }) in my mobile webapp to disable the native app bouncing in iOS. It works great for disabling the bounce but gives me some weird behavior elsewhere in DOM.
Click events that don't work, etc. I was hoping to get a better understanding of what this does and how to work around it's effects elsewhere in the DOM.
Thanks!
EDIT:
I have these two lines:
$('body').on('touchstart', function(e){ e.preventDefault() };
$('#home').on('click', function(){ alert('home') };
If I comment out the preventDefault line then the #home line works. If I leave it in the #home line doesn't respond. #home is just a div nested in the body.
Any idea what could be causing this behavior? It's part of a bigger codebase so it;s hard to give you all the details but I don't even know where to start.
Thanks Again!

e.preventDefault() tells the browser that if there is a default behavior for this event on this object, then skip that default behavior.
So, for example, if you had a submit button that the default behavior was to submit a form and you had a click handler on that button that did a preventDefault(), then the browser would not submit the form when the button was clicked. A classic use of this might be when the form doesn't validate so you show the user an error message and don't want the form to be submitted to the server.
Or another example. If you set up a click handler for a link and you call e.preventDefault() in that click handler, then the browser will not process the click on the link and will not follow the href in the link.

Related

Safari ignores submit alterations in onclick event

For a Drupal site I've developed a rather simple module to prevent users of pressing multiple times on a submit button. When the submit button is pressed it's replaced with a small message to have some patience.
The problem in all browsers it seems to work fine with the exception of Safari.
$("input[id^='edit-submit']").click(function(e){
var message = Drupal.t('Please wait...');
$(this).hide();
$('<span>' + message + '</span>').insertAfter(this);
});
When I look into the debugger I see an attribute appearing style="display: none;" but Safari seems to ignore it. When I manually (through the developer tools) add a display:none the button disappears.
I don't know it jQuery doesn't run in Safari on form submit is related because when I add a console.log() between the click function body it is executed once (the $(this) value also points to the correct element) but it doesn't respond to any changes on that button.
It seems that from the moment you click on the submit button it is in some kind of locked state - which would also prevent double submits - but I want to be rather sure this is standard behaviour for safari then a bug that could haunt me in the future.
I've tried googling on certain keywords but I couldn't find anything documentation that describes this behaviour in Safari.
EDIT: I also tried removing (and detaching) the button on the onclick which makes the button disappear, but then the form doesn't get submitted anymore.
Try to use:
.css('display', 'none');

use jQuery to disable all clicking actions except scrollbar

I am trying to make a page COMPLETELY UNCLICKABLE (both right click and left click) and to display a message when someone clicks. Since I know that this will raise lots of questions such as
"why would anyone ever want to do this...this is stupid...then nobody
can navigate the site...and it doesn't protect your content
anyway...etc"
here is the explanation of my purpose. I have a page that is at the moment only a graphic mockup of what the finished website will eventually look like. No matter how many times I explain that the mockup is ONLY AN IMAGE and not a real navigable website, they still email me to say that they cannot click on the menus and links. Since it is a single page mockup, I want to pop up an alert() message (can't use a modal because you can't click to dismiss it if clicking is disabled) to let them know that they have clicked something non-functional. I am trying to do this in as few lines of code as possible, and have the following working at the moment:
<script>
$('html').mousedown(function(event) {
event.preventDefault();//To prevent following the link
alert('Demo Graphic Only...clicking on stuff will NOT work at this point.');
});
</script>
The issue is that when using .mousedown I capture the user trying to click on the browser scroll-bar to scroll down. I was surprised by this since it is not part of the actual PAGE CONTENT but rather a part of the BROWSER...but it is catching it nonetheless. I tried using .click in place of .mousedown however only seem to catch a normal (left) click in that case... Does anyone know how to easily (minimal lines of code if possible) capture the left AND right click event, but allow user interaction with the browser scrollbar?
Try this :
$(document).click(function(event) {
event.preventDefault();//To prevent following the link
console.log('Demo Graphic Only...clicking on stuff will NOT work at this point.');
});
This Function will be called when click is made on the page , not on the Scrollbars
Try to use
event.stopPropagation();
or
event.stopImmediatePropagation()
For people who come across this question, an alternative approach, good especially if you need to prevent mousedown specifically:
Put the scrolling content in a wrapper element and prevent mousedown only on the inner element. Set the wrapper element to overflow: auto; height: 100%;

Is there an alternate way to trigger autocorrect/autocomplete on mobile Safari (on iOS) when the user presses enter?

I know that normally the browser will handle autocorrect/capitalization/etc on its own when the user presses enter. But I'm using the contenteditable attribute and doing some special handling on "enter" that requires me to use evt.preventDefault() when the user presses enter. Since I'm using preventDefault() in my listener, mobile safari leaves the autocorrect bubble open and it gets pretty funky looking/unusable. Is there any alternate way (maybe using JS to fire an event) to dismiss the bubble or trigger the normal behavior without having to take out preventDefault?
I don't want to get rid of autocorrect functionality, since it is important to my application.
There should be sample code! But I think you talk of something like this:
$("#myForm").submit(function(event) {
event.preventDefault();
// Do other stuff
});
So I'm pretty sure you could fire the .blur-event manually which could fire that autocomplete-function:
$("#myForm #myInput").blur();
If this answer is wrong, please provide sample code - not everybody on Stackoverflow is a magician.
I will say its easy with focus set,
in contrast to previous answer which works with submit the auto behavior will continue to auto correct..
$("#MyInput").focus(function(event){
event.preventDefault();
});
$("#MyInput").blur(){ // do events you want on focus lost.. from input.. :)
});
I think this will do..

IE9 won't execute the default action for a link, if it's disabled during the click event

To prevent users from submitting a form twice, I disable the submit button after a click with:
$('a').on('click', function(){
$(this).button('option', 'disabled', true);
});
​
On Chrome, the default action (following the link / executing the JS in the href attribute) is executed. On IE9 however, nothing happens and the button stays disabled. I tried poking around it in the respective JS debuggers and it seems both events are processed in the same phase.
You can see it in action on jsFiddle: http://jsfiddle.net/inerdial/yXWBn/2/
Is there any reason for this behaviour, and/or a workaround less hackish than manually triggering the button's default action somehow?
In case it's any relevant, the submit button is an ASP.NET LinkButton, styled with jQuery UI.
You can try putting that logic into a setTimeout call
You have to set UseSubmitBehavior="false" on the submit button and everything will work as expected.

Using BOTH Href & click listener

I've got a browser plug-in I'm working on and I want it to behave a certain way when the user clicks things. Not limited to, but including, a behavior for links!
The problem is that the plug-in has to work for a wide variety of sites, and some of those sites use the dreaded pseudo-protocol such as:
Show Element
Currently my behavior is added to the anchor tag via
anchor.addEventListener('click', superAwesomeFunction);
Unfortunately this has a problem where the click listener only fires once. If I preventDefault() of course the click listener sticks around, but I've now broken the host site! Otherwise, clicking the link fires the click listener but only on the first click. I'm wondering why my superAwesomeFunction() doesn't fire again if the link is clicked a second time. Is href="javascript:things()" doing more than I know?
It is possible to add an event listener to a link that has a JavaScript function call set in the href attribute.
Here's a jsFiddle that shows it working. Both functions fire each time the link is clicked.
There must be something else going on with your code beyond what we can see in what you gave us.
If you must wait user some time and going on url then, you may add some code to your superAwesomeFunction's process end:
document.location.href = $(this).attr("href");

Categories