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");
});
Related
I'm posting this because I can't find the same question elsewhere.
I'm trying to trigger the default action of an anchor but calling .click() or .trigger('click') in the click handler of another anchor.
Like so:
HTML:
<!-- I want to simulate a user clicking link2 when the user actually clicks link 1. -->
<!-- My guess is that triggering click just triggers any JS-bound click handlers. But that would defeat the point of e.preventDefault() when you usually have to call this to stop the default href being followed -->
<a id="link1" href="#">Click</a>
<a id="link2" target="_blank" href="http://google.com">Link 2</a>
JS:
$(document).ready(function(){
$('#link1').on('click', function(){
$('#link2').click();
$('#link2').trigger('click'); // Neither work
});
});
I feel like such a noob but nothing happens on click. Is this something that is blocked for security or accessibility?
I do not want to use window.open();
fiddle: http://jsfiddle.net/0hggdkzb/
try
jQuery(document).ready(function(){
$('#link1').on('click', function(){
// $('#link2').click().css('color','red');
document.getElementById("link2").click();
});
});
DEMO
Or
you can trigger event $('#link2')[0].click();
Triggering-event-handlers clears about this,
The .trigger() function cannot be used to mimic native browser events,
such as clicking on a file input box or an anchor tag. This is
because, there is no event handler attached using jQuery's event
system that corresponds to these events.
The jQuery UI Team created jquery.simulate.js in order to simplify
triggering a native browser event for use in their automated testing.
Its usage is modeled after jQuery's trigger.
$( "a" ).simulate( "click" );
And for your problem you have to use javascript core event as #Bala answered like,
$(function(){
$('#link1').click(function(){
$('#link2')[0].click();
});
});
or use location.href like,
$(function(){
$('#link1').click(function(){
window.location = $('#link2').attr('href');
});
});
Also, Hoffman gave the answer for the same issue
Try this:
$(document).ready(function()
{
$("#link1").click(function()
{
$('#link2')[0].click();
});
});
I have a list of divs with onclick actions associated with them. Inside each div there is a normal link. When i click the link, the javascript is executed (which is fast) and THEN the new page associated with the link starts to load (a fraction of a second later).
What can i do to the link to make it not execute the javascript - although it is located inside the div defined in the script? Is there a way of excluding it from the association, or telling it to stop all javascript onclick?
Thanks!
you could stop the event propagation for the link inside your div elements, like so
$('div a').on('click', function(evt) {
evt.stopPropagation()
/* do something */
});
doing so, when you click on a link, the handler associated to the click event for div elements won't be executed.
Try this ,
$("#yourlinkId").click(function(event) {
event.preventDefault();
});
Have the onclick handler of the link return false, e.g. like this:
<a href="http://foo/bar" onclick="return false">
Or, in jQuery notation:
$('div a').on('click', function(e) { return false; });
or you could prevent the default action by
$('div a').on('click', function(event) {
event.preventDefault();
});
i think stop propogation would prevent any further events that are caused by clicking the link where as prevent default will just stop the actual link click?
I have this code to switch a switching button image:
$("#invio_scatola_on, #invio_scatola_off").click(function(){
$("#invio_scatola_off").toggle();
$("#invio_scatola_on").toggle();
});
when it is executed, the browser goes to the top of the page. why?
You probably need to prevent the default action of whatever element you click:
$("#invio_scatola_on, #invio_scatola_off").on('click', function(e){
e.preventDefault();
$("#invio_scatola_off, #invio_scatola_on").toggle();
});
Based on the few information that you've provided, if the browser is scrolling to the top, it means that you need to prevent its default behavior.
Check to see if the browser is appending "something" to the current URL...
You can prevent that like this:
$("#invio_scatola_on, #invio_scatola_off").click(function(event){
// prvent default behavior
event.preventDefault();
$("#invio_scatola_off").toggle();
$("#invio_scatola_on").toggle();
});
See the jQuery event.preventDefault() for more information on how it works.
I can only guess, because you didn't post your html code. Most probably your two elements are links with href="#". After you click handler the regular action is fired, navigating to the anchor # on your site (which is the top).
Try:
$("#invio_scatola_on, #invio_scatola_off").click(function(event){
$("#invio_scatola_off").toggle();
$("#invio_scatola_on").toggle();
event.preventDefault();
});
and see if that helps. More on event cancelling with jQuery here:
http://api.jquery.com/event.preventDefault/
I think you binded the click on anchor tags with href as # so for that you can use preventDefault() of javascript like :
$("#invio_scatola_on, #invio_scatola_off").click(function(evt){
evt.preventDefault();
$("#invio_scatola_off").toggle();
$("#invio_scatola_on").toggle();
});
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 want to do this: when you click a link on a page, it will open the link normally, but when you double click the link, it will alert the link's 'href' attribute.
However, when I try to double click a link, it will always open the link. Any idea?
The link opens after the first click of a double click, so you will need to add a time delay to determine which is which. Here's some code (using the jQuery JavaScript library for brevity) that works on all the browsers except Internet Explorer (try it out). If you can figure out why it doesn't, I'd like to know.
$('a').click(function(event) {
var elem = $(this),
clickTimeout = elem.data('clickTimeout');
if(clickTimeout) {
// Double click; cancel the single click timeout
clearTimeout(clickTimeout);
elem.data('clickTimeout', null);
alert(elem.attr('href'));
} else {
// Might be a single click; wait and see
elem.data('clickTimeout', setTimeout(function() {
// Single click; timeout was not cancelled
elem.data('clickTimeout', null);
// Navigate to the link's URL
window.location.href = elem.attr('href');
}, 500));
}
// Stops propagation and prevents default action
return false;
});
maybe it's just a typo: the event you're looking for is named ondblclick, not ondbclick.
To avoid the link being opened, you may want to work with right-clicks instead.
Because the onclick event gets fired before the ondbclick event.
That is the reson why ondblclick does not get executed -> the link gets loaded first.
This is tricky because the order of event is not the same in all browsers. Check out this article: http://unixpapa.com/js/mouse.html under the section for double clicks.
You could cancel the default action of clicking the link and write your own handler for the click event.
A double click is two clicks. Thus, it fires the click event.