I have this href link in a control that calls a javascript and pass the variable to it:
Link
I need to stop it opening the browser. How can I do that?
event.preventDefault(); will prevent the default behaviour of the click on the element.
So:
Link
Demo: http://jsfiddle.net/AbwUW/
If you want to prevent default browser behavior - just return false at onclick
Link
or make function getLink to return false
Examples
Try this:
Link
I have an onbeforeunload event :
$().ready(function() {
window.onbeforeunload=function() { return "haha" };
});
And my links are like this (ajax web site) :
<a href="#pageX" />
But the onbeforeunload is never called. What can i do ?
Thanks
I'm guessing since you're trying to bind to the onbeforeunload and return a string, that you're looking to provide the user with an "Are you sure you want to leave this page" dialog on an AJAX site.
In which case you probably need to go about this a little differently by binding a click handler onto the links. So you can prevent the hash change until the confirmation is made.
Something like:
$('a[href^="#"]').live('click',function(e){
if( //should we be confirming first? ) {
//put your confirmation code here either using default JS windows or your own CSS/jQueryUI dialog boxes
// this code should either cache the url of the link that was clicked and manually update the location with it when the user confirms the dialog box (if you're using JQUI windows) or simply use JS confirmation boxes and based on the response, all you need to do is return; and the link click will handle normally
e.preventDefault(); //prevent the link from changing the hash tag just yet
e.stopImmediatePropagation(); //prevent any parent elements from firing any events for this click
}
} );
Don't get me wrong, but are you serious ?
That link just refers a hash-tag, hence, it will not leave the current site and there will be no call to onbeforeunload nor unload.
If there is any *click event handlerbound to that anchor aswell, there must be something in the event handler code which really forces the current site to get unloaded (location.href` for instance).
If you just switch HTML via Ajax, there is no onbeforeunload aswell.
You could bind a handler to the onhashchange event (check browser compatibilty) but that would fire for any change that happens in your url/hash.
You're probably looking for the onhashchange event:
https://developer.mozilla.org/en/DOM/window.onhashchange
I want to change the standard browser behavior in a web app where a mousedown click would cause the click action to happen before the button is released. I want this for all the hyperlinks in an app.
Is there a simple way to accomplish this in jQuery?
I am not looking for a solution to change every link individually. It should be a global event handler which works in current and future links.
Example:
in Yahoo Mail, as soon as you click on a tab, that tab gets focus. It happens before the button is released.
There's a requirement to mimic this behavior for hyper links
If I'm understanding you correctly and you want to override the default link behavior, something like this should work:
$(function(){
$("a").bind({
click: function(e){
e.preventDefault();
},
mouseenter: function(){
window.location.href = $(this).attr("href");
}
});
});
Here's a jsFiddle: http://jsfiddle.net/H2L4D/1/
You need http://api.jquery.com/mousedown/
$('a').mousedown(function() {
alert('Handler for .mousedown() called.');
});
$('a').unbind('click');
$('a').bind('mousedown', function() {
//alert('mousedown happened');
});
If you'd like it to apply to all hyperlinks over the lifetime of the page, even dynamically-created ones, you'll want something like this:
$('a').live('mousedown', function(evt)
{
// this stops the default behaviour of the event
evt.preventDefault()
// This changes the location of the page to the href value of the element you clicked
window.location.href = $(this).attr("href");
});
I have a link on a web page. When a user clicks it, a widget on the page should update. However, I am doing something, because the default functionality (navigating to a different page) occurs before the event fires.
This is what the link looks like:
Update Cart
This is what the jQuery looks like:
$('.update-cart').click(function(e) {
e.stopPropagation();
updateCartWidget();
});
What is the problem?
e.preventDefault();
from https://developer.mozilla.org/en-US/docs/Web/API/event.preventDefault
Cancels the event if it is cancelable,
without stopping further propagation
of the event.
$('.update-cart').click(function(e) {
updateCartWidget();
e.stopPropagation();
e.preventDefault();
});
$('.update-cart').click(function() {
updateCartWidget();
return false;
});
The following methods achieve the exact same thing.
You want e.preventDefault() to prevent the default functionality from occurring.
Or have return false from your method.
preventDefault prevents the default functionality and stopPropagation prevents the event from bubbling up to container elements.
You can use e.preventDefault(); instead of e.stopPropagation();
This code strip all event listeners
var old_element=document.getElementsByClassName(".update-cart");
var new_element = old_element.cloneNode(true);
old_element.parentNode.replaceChild(new_element, old_element);
I've just wasted an hour on this. I tried everything - it turned out (and I can hardly believe this) that giving my cancel button and element id of cancel meant that any attempt to prevent event propagation would fail! I guess an HTML page must treat this as someone pressing ESC?
I'm currently using <a> tags with jQuery to initiate things like click events, etc.
Example is Text
But I hate how the '#' makes the page jump to the top of the page. What can I do instead?
So this is old but... just in case someone finds this in a search.
Just use "#/" instead of "#" and the page won't jump.
In jQuery, when you handle the click event, return false to stop the link from responding the usual way prevent the default action, which is to visit the href attribute, from taking place (per PoweRoy's comment and Erik's answer):
$('a.someclass').click(function(e)
{
// Special stuff to do when this link is clicked...
// Cancel the default action
e.preventDefault();
});
you can even write it just like this:
im not sure its a better way but it is a way :)
Solution #1: (plain)
Text
Solution #2: (needed javascript)
Text
Solution #3: (needed jQuery)
Text
<script>
$('a.someclass').click(function(e) {
e.preventDefault();
});
</script>
You can use event.preventDefault() to avoid this. Read more here: http://api.jquery.com/event.preventDefault/.
Just use <input type="button" /> instead of <a> and use CSS to style it to look like a link if you wish.
Buttons are made specifically for clicking, and they don't need any href attributes.
The best way is to use onload action to create the button and append it where you need via javascript, so with javascript disabled, they will not show at all and do not confuse the user.
When you use href="#" you get tons of different links pointing to the same location, which won't work when the agent does not support JavaScript.
If you want to use a anchor you can use http://api.jquery.com/event.preventDefault/ like the other answers suggested.
You can also use any other element like a span and attach the click event to that.
$("span.clickable").click(function(){
alert('Yeah I was clicked');
});
$('a[href="#"]').click(function(e) {e.preventDefault(); });
You can use #0 as href, since 0 isn't allowed as an id, the page won't jump.
Text
There are 4 similar ways to prevent the page from jumping to the top without any JavaScript:
Option 1:
Link
Option 2:
Link
Option 3:
Link
Option 4 (Not recommended):
Link
But it's better to use event.preventDefault() if you are handing the click event in jQuery.
Just use
Text
JQUERY
$('.someclass').click(function(e) { alert("action here"); }
If the element doesn't have a meaningful href value, then it isn't really a link, so why not use some other element instead?
As suggested by Neothor, a span is just as appropriate and, if styled correctly, will be visibly obvious as an item that can be clicked on. You could even attach an hover event, to make the elemnt 'light up' as the user's mouse moves over it.
However, having said this, you may want to rethink the design of your site so that it functions without javascript, but is enhanced by javascript when it is available.
Links with href="#" should almost always be replaced with a button element:
<button class="someclass">Text</button>
Using links with href="#" is also an accessibility concern as these links will be visible to screen readers, which will read out "Link - Text" but if the user clicks it won't go anywhere.
You could just pass an anchor tag without an href property, and use jQuery to do the required action:
<a class="foo">bar</a>
I have used:
Text
I've always used:
Some text
when trying to prevent the page jump. Not sure if this is the best, but it seems to have been working well for years.
The #/ trick works, but adds a history event to the browser. So, clicking back doesn't work as the user may want/expect it to.
$('body').on('click', 'a[href="#"]', function(e) {e.preventDefault() }); is the way I went, as it works for already existing content, and any elements added to the DOM after load.
Specifically, I needed to do this in a bootstrap dropdown-menu inside of a .btn-group(Reference), so I did:
$('body').on('click', '.dropdown-menu li a[href="#"]', function(e) {e.preventDefault() });
This way it was targeted, and didn't affect anything thing else on the page.
You can also return false after processing your jquery.
Eg.
$(".clickableAnchor").live(
"click",
function(){
//your code
return false; //<- prevents redirect to href address
}
);
I use something like this:
Text
To prevent the page from jumping, you need to call e.stopPropagation(); after calling e.preventDefault();:
stopPropagation prevents the event from going up the DOM tree. More info here: https://api.jquery.com/event.stoppropagation/
If you want to migrate to an Anchor Section on the same page without page jumping up use:
Just use "#/" instead of "#"
e.g
Home
About
contact page will not jump up on click..
Adding something after # sets the focus of page to the element with that ID. Simplest solution is to use #/ even if you are using jQuery. However if you are handling the event in jQuery, event.preventDefault() is the way to go.
The Link and Link does not work if one has to click on the same input more than once.. it only takes in 1 event click for each on multiple inputs.
still the best way to go is with Link
then,
event.preventDefault();
The simplest one for me was to do this.
Some text
The reason for using JS is that most modern sites rely on it.