Develop Reference

toggle div content when click anywhere on the page

I have simple slider which I open/close on click event.
$('#tab1-slideout span').click(function () {
manageToggleStateTab1();
});
function manageToggleStateTab1() {
if (tab1ToggleState == 'collapsed') {
$('#tab1-content').slideToggle('slow');
$('#tab1-slideout span').addClass('active');
tab1ToggleState = 'expanded';
});
and on page load I set this tab1ToggleState with initial value
var tab1ToggleState = 'collapsed';
this works great but I want to expand this further in order to allow toggling state on click event anywhere outside #tab1-content container div.
I tried to wire click event anywhere on page except the one with toggle content
$(document).not($('#tab1-content')).click(function () {
manageToggleStateTab1();
});
but this not gives me desired result, div immediately slide down after it slide up.

you can use this function
// hide some divs when click on window
function actionwindowclick(e , el , action){
if (!$(el).is(e.target) // if the target of the click isn't the container...
&& $(el).has(e.target).length === 0) // ... nor a descendant of the container
{
action();
}
}
in click event
$(document).click(function (e) {
actionwindowclick(e , '#tab1-content' , function(){
// do action here
});
});
simply this function says if the element is not a target do the action
Working Demo
and while you use $(document).click(... you will need event.stopPropagation()
so for example
$('#tab1-slideout span').click(function (event) {
event.stopPropagation();
manageToggleStateTab1();
});
Working Example

Avoid jQuery click function on <a href=""> elements [duplicate]

This question already has answers here:
disable a hyperlink using jQuery
(11 answers)
Closed 8 years ago.
I do have the following click function on a div element. Inside the div element are links. How can I stop the click function on this links? I tried z-index but it doesn't work.
$('.thumb.flip').click(function () {
if ($(this).find('.thumb-wrapper').hasClass('flipIt')) {
$(this).find('.thumb-wrapper').removeClass('flipIt');
} else {
$(this).find('.thumb-wrapper').addClass('flipIt');
}
});

Add code to stop the click from propagating from the links up the DOM to the div:
$('a').click(function(e){e.stopPropagation();})
See http://api.jquery.com/event.stoppropagation/
jsFiddle example

Try e.preventDefault()
$('.thumb.flip').click(function (e) {
e.preventDefault();
if ($(this).find('.thumb-wrapper').hasClass('flipIt')) {
$(this).find('.thumb-wrapper').removeClass('flipIt');
} else {
$(this).find('.thumb-wrapper').addClass('flipIt');
}
});

Capture the event object:
$('.thumb.flip').click(function (evt) {
Test to see what sort of element was clicked:
if (evt.target.tagName.toLowerCase() === "a") {
return true;
}

Use the mouse down event and in your handler call event.stopPropagation() and event.preventDefault();

if click target is an a just return false else do normal stuff...
$('.thumb.flip').click(function (e) {
if ($(e.target).is('a')) {
return false;
}
});
z-index won't do anything, however if you want to prevent clicks from css you can add pointer-events property to links and set the value none. That will disable all kind of events on links.

$('.thumb.flip').click(function (e) {
if (e.target.nodeName==="A") { //if target is an anchor, ignore
return;
}
$(this).find('.thumb-wrapper').toggleClass('flipIt') //toggle class
});

If you can edit markup do this:
<a href="javascript:void(0);" ></a>

Javascript - Click Button to FadeIn, FadeOut by clicking anywhere

I want my navigation to fade-in when a special button is clicked, and to fade away when the user is clicking somewhere else - doesn't matter where.
My Script looks like this:
function showText() {
var spoiler = document.getElementById('spoiler');
var button = document.getElementById('navicon');
if (spoiler.style.display == 'block') {
spoiler.style.display='none';
button.value = 'Text einblenden';
} else {
spoiler.style.display='block';
button.value = 'Text ausblenden';
}
return false;
}
My workaround was to give every navigation element the following code snippet.
onclick="$('#thedivlayeriwanttofadeout').fadeOut('slow');"
Can anybody help me?

Use bubbling to attach a single click handler to a common parent element (for example, body).
Here's a simple example:
$(function () {
$("#myButton").click(function (e) {
$("#hidden").fadeIn();
return false;
});
$("#parent").click(function() {
$("#hidden").fadeOut();
});
});
Clicking the button will fade in the element with id hidden. Clicking anywhere in parent will fade it out again.

onClickOut (click after leaving the element) [duplicate]

This question already has answers here:
How do I detect a click outside an element?
(91 answers)
Closed 9 years ago.
The problem was that I need a "onClickOut"-Event.
For example:
You have a DIV viewing on hovering (onMouseOver) some Button or what ever.
If you click outside the element it needs to hide, but if you say $("body").click it also will be hidden when you click into the element itself. :/
Now I listen the mouseposition and when mouseleave() I set a var on clicking into my element. In the next step I listen a generelly click-event (body) but I ask if the var was set. If not it has to be a click outside my element, so I can hide my element.
I hope you can use it:
$("#schnellsuche_box").mouseleave(function() {
var inside;
$("#schnellsuche_box").click(function() {
inside = true;
});
$("body").click(function() {
if(!inside) {
$("#schnellsuche_box").hide();
}
});
delete inside;
});

You do that by listening to a click on the document level, and inside the event handler you check if the clicked element was #schnellsuche_box or any element inside #schnellsuche_box by using closest(), like so :
$(document).on('click', function(e) {
if ( ! $(e.target).closest('#schnellsuche_box').length )
$('#schnellsuche_box').hide();
});
FIDDLE

You need to stop the #schnellsuche_box click event from bubbling up to the body click event (that's default event propagation) by doing return false:
$("#schnellsuche_box").click(function() {
inside = true;
return false;
});

Try this:
$("body").click(function(e) {
var $target = $(e.target);
if (!$target.is('#schnellsuche_box') &&
!$target.parents('#schnellsuche_box').length) {
alert('outside');
}
});

$("#schnellsuche_box").on("click",function(event) {
event.preventDefault();
event.stopPropagation();
});

How to detect clicking off of an element

Basically I want user to click on any .editable item, which makes an input appear, copy its styles, and then if they click anywhere else, I want the input to disappear and the changes to save. I'm having difficulty making this work. I've seen a solution using event.stopPropagation, but I don't see how to include it the way I have my code structured:
$(function() {
var editObj = 0;
var editing = false;
$("html").not(editObj).click(function(){
if (editing){
$(editObj).removeAttr("style");
$("#textEdit").hide();
alert("save changes");
}
});
$(".editable").not("video, img, textarea")
.click(function(event) {
editObj = this;
editing = true;
$("#textEdit")
.copyCSS(this)
.offset($(this).offset())
.css("display", "block")
.val($(this).text())
.select();
$(this).css("color", "transparent");
});
}
copyCSS function from here
I need to distinguish between clicks on the editable object, and clicks away from it, even if that click is onto a different editable object (in which case it should call 2 events).

Try this:
$('body').click(function(event) {
var parents = $(event.target).parents().andSelf();
if (parents.filter(function(i,elem) { return $(elem).is('#textEdit'); }).length == 0) {
// click was not on #textEdit or any of its childs
}
});
$(".editable").not("video, img, textarea")
.click(function(event) {
// you need to add this, else the event will propagate to the body and close
e.preventDefault();
http://jsfiddle.net/dDFNM/1/
This works by checking if the clicked element, or any of its parents, is #textEdit.
The event.stopPropagation solution can be implemented this way:
// any click event triggered on #textEdit or any of its childs
// will not propagate to the body
$("#textEdit").click(function(event) {
event.stopPropagation();
});
// any click event that propagates to the body will close the #textEdit
$('body').click(function(event) {
if (editing) {
$("#textEdit").hide();
}
});
http://jsfiddle.net/dDFNM/2/

The problem is that you are not correctly binding to the editObj. Perhaps it will help if you move the binding to inside your .editable click handler, or even better use live() or delegate().
$("html").not(editObj)... is bound once at document ready time, and at that time editObj is false