Develop Reference

Android click event div element

I am having the following issue with click/touchstart event on Android (as far as I know only happening on Android),
1. the element triggers a modal window.
2. one of the buttons/links inside this modal gets triggered instantly without giving the user the option to make a choice.
It is of course required for the visitor/user to view the modal content before being redirected to a link to another page from one of those buttons.
I believe this is due to the 'touchstart' event bind to this div, which I am using since click events on divs for touch devices don't work.
I am using jQuery to make this work, and on iOS there doesn't seem to appear any issue.
$(document).on('click touchstart','.mydiv', function(e) {
e.preventDefault();
// open modal
});
Any suggestions please.

Try this:
$(.mydiv).on('touchstart', function(e) {
e.preventDefault();
// open modal
});
cheers

Prevent double-click event on lower layer when double-click\hiding a higher layer

So I have a form where double-clicking a field brings up a custom modal window. The buttons for "Save" and "Cancel" on the modal window have "click" events that call hide() on the modal window layer. However, some of our users naturally double-click things. Double-clicking the save or cancel buttons fires the click event and hides the modal window but also fires the double-click event of the field that was under the modal window causing the modal window to display again. I know using a setTimeOut() and delaying the hide() of the modal window will resolve the issue but I prefer not to degrade the responsiveness of the UI if possible. Any suggestions?
Here is a fiddle to generally explain the problem.
https://jsfiddle.net/e51rc24j/4/
$(function() {
$(".field").on("dblclick", function(ev) {
$(".hoverlayer").show();
});
$(".hoverlayer").on("click", function(ev) {
var thisLayer = this;
$(thisLayer).hide();
/* PUTTING IN DELAY ON HIDE SOLVES PROBLEM BUT I PREFER TO NOT DELAY UI RESPONSIVENESS IF POSSIBLE
setTimeout(function(){
$(thisLayer).hide();
}, 300);*/
});
});

At first I thought the problem was propagation, so I added a stopPropagation to your event. But then I found out that it's not the double click that's propagating. The problem is something completely different, namely that the SECOND click (of the double click to close the black overlay) LANDS on the input field again, which triggers the double click event on the input box again.
So all you have to do, is move the SAVE and CANCEL buttons so they are not directly on top of the input field.
I have made a little change to your jsfiddle to illustrate:
https://jsfiddle.net/e51rc24j/6/
If you double click in the "PROBLEM", the modal black div will open again, because your second click lands INSIDE the <input> text field.
However, if you double click anywhere else in the black div ("Not a problem"), it will not open.

jquery click handler not closing slide in menu

Relevant JSFiddle: http://jsfiddle.net/7u2fy/
I was trying to have a slide in menu that slides in on a button click and slides out when you press escape or click anywhere outside the menu. I also wanted to darken the non-menu portion of the screen when the menu is active.
My problem is the jquery click handler isn't working for the closing of the menu.
The jsfiddle looks a little weird for even though in my actual project it looks fine and only the jquery click handler isn't working.
The specific code that's not working...
$('#site-wrapper.show-nav #site-canvas').click(function () {
toggleNav();
});

Your click handler is working fine, the issue is the grey block that appears on this element: #site-wrapper.show-nav #site-canvas:after
It essentially blocks any clicks, remove the below property 'absolute' and your can click.
#site-wrapper.show-nav #site-canvas:after {
*position: absolute;*
}
The issue is within your CSS not your JS, please see this fiddle of clicking working: http://jsfiddle.net/7u2fy/1/

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.

jQuery click event stop propagation can't get to work?

I have a gallery type of interface that I'm trying to get to work, I want to be able to click outside of it to close it, however there is a div inside that contains the main elements, photos, and things to click. However as it is now when you click inside the div it closes, because it's a child in the element that when you click it closes.
I have the divs like this:
<div class="theater-wrapper">
<div class="theater-container"></div>
</div>
everything is loaded into theater-container via ajax.
When you click .theater-wrapper it should fire the event to close, however when you click theater-container it shouldn't.
This is how I have tried to close it:
$(".theater-wrapper").click(function (event) {
$('.theater-wrapper').hide();
event.stopPropagation();
});
I have a jsfiddle showing this in action: http://jsfiddle.net/Cs8Kq/1/

If you want to stop propagation of the click event on .theater-container, then that's where you need to put the command. Right now you have it applied to the .theater-wrapper click action.
$(".theater-container").click(function (ev) {
ev.stopPropagation();
});