Capture a click anywhere on the page, even on a link - javascript

This chunk of code
$(document).click(function(e) {
$('#mymodal').modal('show');
});
captures a click anywhere on the page.
Unless that click is on a link, in which case the browser seems to follow the link rather than popping up the modal (at least, this is the behavior in Chrome).
How can I capture that the click, even if it's on a link?
One idea: overlaying the page with a fixed-position div that covers everything and captures the click. But maybe there is a more elegant way?

Add return false;:
$(document).on('click', function(e) {
$('#mymodal').modal('show');
return false;
});
JSFIDDLE
For more information read this thread.

You can do this :
$(document).on('click', function(e) {
$('#mymodal').modal('show');
return false; // avoids the propagation and the link default behavior
});

Related

Hover state on ipad issue

I have a masonry layout with each cell is infact a hyperlink requiring a hover state to be shown.
On ipad (as predicted) the hover states did not display. The client has requested that the links should now need two clicks: once to display the hover state, and a second click to engage the hyperlink - So I used this bit of javascript:
$(document).ready(function() {
$('.my_button').bind('touchstart touchend', function(e) {
e.preventDefault();
$(this).toggleClass('hover_effect');
});
});
The problem now is that on ipad the hover states now display (which is great), but the second click is being ignored and does nothing.
You can view the live site at http://mayce.derringer.com.au/residential/
The problem now is that on ipad the hover states now display (which is
great), but the second click is being ignored and does nothing.
With
e.preventDefault();
you prevent the default behaviour so the click/touch will never be able to follow the link. Try like so
$(document).ready(function() {
$('.my_button').bind('touchstart touchend', function(e) {
if($(this).hasClass('hover_effect') {
return; // skip rest of code, so default will happen
// which is following the link
}
e.preventDefault();
$(this).addClass('hover_effect'); // no reason to toggleClass
// cause the seccond click/touch should always go to destination
});
});
Now probably you want it though that if click/touch on a different $('.my_button') you need to remove the hover_effect to all the other my_button(s) so add
$('.my_button').not(this).removeClass('hover_effect');
like so
$(document).ready(function() {
$('.my_button').bind('touchstart touchend', function(e) {
$('.my_button').not(this).removeClass('hover_effect');
if($(this).hasClass('hover_effect') {
return; // skip rest of code
}
e.preventDefault();
$(this).addClass('hover_effect'); // no reason to toggleClass
// cause the seccond click/touch should always go to destination
});
});
I haven't tried the code, but it should work. Let me know if it doesn't.
A little bit more research, and I have come up with this solution which works:
jQuery(document).ready(function(){
$('.middle').bind('touchstart touchend', function(e) {
//This will return true after the first click
//and preventDefault won't be called.
if(!$(this).hasClass('nav_returnlink'))
e.preventDefault();
$(this).addClass('nav_returnlink');
});
});

jQuery page transition but keep "open in new tab"

Hy there,
I noticed several pages with a pretty sweet page transition (one example: semplice)
if you click the navigation the page fades out, reloads and fades back in. Now I tried to create something on my own. I created the effects for the fadeIn and the fadeOut. Then I created something like this:
$(function(){
fadeInbody();
$('ul#navi li a').click(function(e) {
e.preventDefault();
newLocation = this.href;
fadeInbody(function(){
window.location = newLocation;
});
});
});
Actually that works quite good for the normal left-click.
But now I have a mousebutton that opens the link automatically in a new tab. I use this button quite a lot. In this case because of the e.preventDefault(); it breaks this behaviour and opens the page the same tab.
Is there a better to create something like this without breaking the default behaviour? (In the semplice-example the new tab mousebutton works)
You can check which button the user has clicked in the event's which property.
So, your code would look like this:
$(function(){
fadeInbody();
$('ul#navi li a').click(function(e) {
if (e.which == 1) {
e.preventDefault();
newLocation = this.href;
fadeInbody(function(){
window.location = newLocation;
});
}
});
});
You basically run your fade logic when the user clicks with the left button.
See comments below the question for cross-browser compatibility info.

a cancel link isn't correctly working

after inspecting the element on google chrome tools
<a class="_cancelRxSelection" href="javascript:void(0)">Cancel</a>
And I had found that in the code:
$('a._cancelRxSelection', self.el).click(function() {
$('div._configRx', el).remove();
});
},
it's just a cancel link that supposed to cancel after a button has been clicked.
I know this is fairly broad but what are some things i can look at?
I tried el).hide(); instead of remove(); still of no effect
Remove the href="javascript:void(0)". Also, add a .preventDefault() inside the original click handler. ie:
$('a._cancelRxSelection', self.el).click(function(e) {
e.preventDefault();
$('div._configRx', el).remove();
});
})

Page refreshes during JQuery call

For some reason when this JQuery call is made the page refreshes. I was lead to believe that a return false; at the end of a JQuery function would cause the page not to reload, but apparently this is not the case? Here is my stripped down code:
$(function() {
$(".vote").click(function() {
return false;
});
});
When I click on the vote button the page is refreshed. I know that this code is being called because if I replace return false with alert('asdf'); the alert appears.
Often when you want to prevent a link from being followed or a form from submitting, you want to tell the event to preventDefault():
$('a').click(function(e){
e.preventDefault();
});
Try this:
$(function() {
$(".vote").click(function(e) {
e.preventDefault();
});
});
You can't put a div in an a: div is block-level element, a is inline, and HTML does not allow block elements inside inline elements. Browsers will try to automatically correct this by rearranging your DOM tree somehow (for example, <a><div></div></a> might end up as <a></a><div><a></a></div><a></a>); which leads to all sort of funny behavior. In Firefox you can use 'view selection source' (or, of course, Firebug) to check what happened.

Jquery - hide on click anywhere on document

I have a div that hides whenever you click outside of it but I'm having some trouble getting certain links inside the div to work (and not hide the div).
$(document).click(function() {
fav.hide();
});
theDiv.click(function(e) {
e.stopPropagation();
});
That is what I have for the whole clicking outside and closing event. Heres the thing: I have two types of links in my div, one regular link and another which is a javascript one. The regular one redirects OK but the javascript one doesn't do anything.
Could somebody help me out? Thanks.
EDIT:
Here are the bits of my code that might help out
var fav = $('#favorites');
// Open & close button
$('#favorites_a').click(function(e) {
e.stopPropagation();
e.preventDefault();
fav.toggle();
});
$('a.c',fav).live('click', function(e) {
alert('hey');
});
$(document).click(function() {
fav.hide();
});
fav.click(function(e) {
e.stopPropagation();
});
HTML (built after page load):
<div id="favorites">
<div class="wrap">
<ul><li>AB</li></ul>
</div>
</div>
This could be a problem with the live() click event handler. When you use live the event handler is actually attached to the document. So the event needs to bubble up to the document, but your click event handler on fav prevents bubbling up.
It works with delegate though:
fav.delegate('a.c', 'click', function(e) {
alert('hey');
});
Here, the event handler is added to fav.
DEMO
I think your code for fav is preventing the 'B' link from working. Instead of .live(), try:
$('a.c').click(function() { ... });
instead.

Categories