Develop Reference

jQuery Click Event Triggering On Multiple Elements (I only want 1)

When my overlay comes up, everything works well, but I added some code to close out the overlay, but this code gets triggered even when I'm just clicking my arrows. The following is the code that's being triggered, which is fine when I'm not clicking the arrows to change the image. But when I click the arrows, the background which is the overlay is also being trigger, so the image is changing but the overlay is also hiding.
$('#overlay').click(function() {
$(this).fadeOut('slow');
});
How can I be able to use the arrows without it also clicking on the background overlay? If you open up the project, you will see what I'm saying.
To open the project:
https://htmlpreview.github.io/?https://github.com/rodriguesandrewb/photo_gallery_v1/blob/master/index.html
To open the repository:
https://github.com/rodriguesandrewb/photo_gallery_v1

You want to use event.stopPropagation(): https://api.jquery.com/event.stoppropagation/
This prevents the event from bubbling (being triggered by other elements)

Your outter most element is #overlay. It means that no matter where you click you'll be always clicking on your #overlay element. That is way your callback is being always triggered and closing your image.
To fix your problem and make your image close only when clicking on it you could use:
$('#changeImage').click(function() {
$(this).closest('#overlay').fadeOut('slow');
});

Ok, there's a ton of code to sort out, so I'm guessing your overlay is
<div id="overlay" style="display: block;"></div>
and your event.target is deep down inside this:
<div class="mainCenter">
<div class="container">
<div id="topFixed">
<input type="text" id="search" placeholder="Search">
</div>
<ul id="gallery">
.......
I'm not 100% sure where your event.target is, (the element you want to click and not everything else). But it's safe to assume that after you click your intended button, the event continues to bubble up the event chain. The event chain is basically your event.target's ancestors which includes#overlay` which is at the very top of the event chain.
To prevent event bubbling (btw bubbling is the default behavior but in instances such as your's it's not desired.) try placing stopPropagation() after or inside at the end of your event handler.
I wish I could be more specific as to where and how to apply this code as it pertains to your source, but you didn't provide the specific areas that concern your eventListeners, eventHandlers, etc...
The #overlay is used in this example but I suggest you use the event.target parent instead. The purpose of this code is to accept an event like 'click' on an element (i.e. button) or multiple elements (i.e. buttons) through their mutually shared parent. That's one place to click for potentially several different buttons. At first you'd think that's non-sense and you'd say, "Sure that button is clicked because the parent was clicked, but now everything the parent is chained to will trigger everything else."
That would be correct except we have stopPropagation(); at the very end of your eventHandler. That will stop propagation of the event bubbling back up the event chain, so there's no more rogue triggers lighting up everywhere. Rogue Triggers® sounds like a great band name. :P
For details and a much better explanation: http://www.kirupa.com/html5/handling_events_for_many_elements.htm
var overlay = document.querySelector("#overlay");
theParent.addEventListener("click", doSomething, false);
function doSomething(e) {
if (e.target !== e.currentTarget) {
var clickedItem = e.target.id;
alert("Hello " + clickedItem);
}
e.stopPropagation();
}

jQuery Dropdown Mouseover two different elements

I want to create a mouseover dropdown navigation (which works with tap on mobile/ipad as well) and have the problem, that the menu itself is in a complete different div. So not a child of that element.
jQuery('.top-menu').on("mouseover",function(){
jQuery(".top-menu-dropdown").stop().slideToggle(200,'easeOutCubic');
});
The div which is triggering that the menu slides down is .top-menu once hovered but I have the problem that I have to add the top-menu-dropdown class to it so it's closing as soon as the user exits the menu. And how can I add a short delay that the menu is not closing as soon as the cursor leaves it? (Stopping timer when you enter it again ofc)

I would write it more like this using the jquery hover function which has both the mouse over and mouse out built in as shown below.
jQuery('.top-menu').hover(
// Mouseover
function(){ jQuery(".top-menu-dropdown").stop().slideDown(200,'easeOutCubic'); },
// Mouseout
function(){ jQuery(".top-menu-dropdown").stop().slideUp(200,'easeOutCubic'); }
);
Replcace slideup and slidedown with whatever direction you would like :)

Disable mouse events on overlapping divs without pointer-events

I have a div with a onClick event, but it's not detecting the mouse because of an overlapping div. I can't put it below the 1st one, so changing the z-index isn't an option.
Is there any way to disable the mouse events on the 2nd div without the pointer-events? I need this to be cross-browser.
Requested sample. Right now all the event does is fire an alert:
<div class="buttonDiv" onClick="buttonAction()"></div>
<div class="filterDiv"></div>

You can try this:
HTML
<div class="buttonDiv" onClick="buttonAction(event)">
OUTER
<div class="filterDiv">INNER</div>
</div>
Javascript
var buttonAction = function(e) {
if(e.target.className == "buttonDiv") {
//code here
alert('got here');
}
}
Example: http://jsfiddle.net/aFRcd/1/
Basically on the click, you send along the click event and then you can see which div was actually clicked using event.target
You'll notice in the example that clicking on OUTER fires the alert whereas INNER does not.

The only solution I could find was having a Mouse Move event attached to the canvas and compare the coordinates of the button to the position and dimensions of the buttons. It's a pain, but at least it does the job

How to close Bootstrap popovers (or any item in general) when a user clicks away from it?

I'm using the popover object from Twitter's Bootstrap library in manual mode and I was wondering how I should go about closing the tooltip when the user clicks away from it.
Here is my HTML:
<a id="stats-bar" rel="popover" data-placement="top" data-trigger="manual" data-title="Title here" data-content="Hello everyone.">Test</a>
and my JavaScript:
$('#stats-bar').click(function(e) {
$(this).popover('show');
});
How can I hide the popover when the user clicks anywhere but the popover itself? I thought of using a fixed transparent div behind the popover and set its click event but I'm not sure that's the best way.

I ended up wiring up to the document click event and hide any tooltips at that point
$(document).click(function (e)
{
// check the parents to see if we are inside of a tool tip. If the click came
// from outside the tooltip, then hide our tooltip
if ($(e.target).parents('.tooltip').length == 0) $('[data-original-title]').tooltip('hide');
});
If you are using a manual trigger option and wiring up to the click event to show the tooltip you will need to call e.stopPropagation() to prevent the document click event from firing when showing the tooltip.

I opted to use a fixed transparent div behind the popover and set its click event as this seems like the most robust and simple solution.

What about an generic click event listener that triggers where ever you click within the body? Check out this post, it looks similar to what you're trying to achieve.
https://stackoverflow.com/a/2125122/1013422
You would use this to close the actual popover
$('#stats-bar').popover('hide')
I would only define the function when the popup event is run and then remove it once you've closed the popup, that way you're not constantly listening for click events.

ProtoypeJS: Only react once on mouseover

Refer to this link (open firebug). I have a "dropdown" html element which has an event observer looking for mouseover. It's working, but it continuously fires mouseover events while you are mousing over the other elements inside it. I am guessing this is because of bubbling.
Is there a way to only make it fire the event on the initial mouseover? I want it to do an Effect and this is breaking the effect. I am sure it's just something basic I am not doing.
Thanks for the help.

Figured it out. With the latest version of prototype you can create onmouseenter and onmouseleave events, which only fire once. Thanks to the Protoype Google group.

I believe that you may want to use Event.stop(event)
Documentation: Prototype: Event.stop

You should only be observing the mouseover event on elements with the dropdown_label class.
Given your HTML:
<div class="dropdown" id="">
<div class="dropdown_label">About <strong>Us</strong></div>
<div class="dropdown_content">
<ul>
<li>Contact</li>
<li>Facts and Figures</li>
<li>Offices</li>
</ul>
</div>
</div>
Both the dropdown label and the dropdown content are contained within the dropdown. It sounds like you only want your effect to execute when the user mouses over the dropdown label.
Edit
Some untested JavaScript that may or may not work
$$('DIV.dropdown').each(function(dd) {
var dd_list = dd.down('.dropdown_content');
dd.select('DIV.dropdown_label').each(function(ddl) {
ddl.observe('mouseover', function(event){
console.log('mouseover');
dd.addClassName('dd_open');
});
});
dd.observe('mouseout', function(event){
console.log('mouseout');
dd.removeClassName('dd_open');
});