Develop Reference

Correct way to prevent triggering `click` if inner element is not hovered when mouse is released

I need to prevent hiding of a modal dialog when user clicks on the dialog, then moves the mouse outside of the dialog, and releases it. The dialog is placed inside outer div on which the click event is registered. Here is the example of the modal dialog and its setup.
So I've done the following:
var pointerDownElement = null;
$('.d1').on('mousedown', function(event) {
// this is how I do it to prevent triggering of click event
pointerDownElement = event.target;
// this is how a browser does it
pointerDownElement = event.currentTarget;
});
$('.d1').on('mouseup', function(event) {
var element = event.target;
if (element === pointerDownElement) {
console.log('triggering click');
}
});
Is this approach correct?

You're definitely on the right track. Slightly modified code:
var pointerDownElement = null;
$('.d1').on('mousedown', function(event) {
event.preventDefault();
pointerDownElement = event.currentTarget;
return false;
});
$('.d1').on('mouseup', function(event) {
if (event.target=== pointerDownElement) {
console.log('triggering click');
}
});
No need to assign a value to a variable if you're only going to use it once. Also, event.preventDefault(); and return false; will guarantee the default behavior of the event doesn't take place (not that there typically is one for mousedown, but I'm assuming you have a reason for including this code).

How to manage events on a specific div?

I would like to catch some events for a specific div if the user clicked on the div (focus the div), keyboard events are catch (not if the last click was out of the div (unfocus the div)
I tried some things, but haven't succeeded : JSFiddle
document.getElementById("box").onkeydown = function(event) {
if (event.keyCode == 13) { // ENTER
alert("Key ENTER pressed");
}
}
This code doesn't work even if I click on the div.
Pure JS solution please

The div element isn't interactive content by default. This means that there isn't a case where the return key will ever trigger on it. If you want your div element to be interactive you can give it the contenteditable attribute:
<div id="box" contenteditable></div>
In order to now fire the event you need to first focus the div element (by clicking or tabbing into it). Now any key you press will be handled by your onkeydown event.
JSFiddle demo.

Giving the 'div' a tabindex should do the trick, so the div can have the focus:
<div id="box" tabindex="-1"></div>
If you click on the div it gets the focus and you can catch the event.
JSFIDDEL
If you set 'tabindex' > 0 you can also select the div using TAB.

You could catch all the click events, then check if the event target was inside the div:
var focus_on_div = false;
document.onclick = function(event) {
if(event.target.getAttribute('id') == 'mydiv') {
focus_on_div = true;
} else {
focus_on_div = false;
}
}
document.onkeyup = function(event) {
if (focus_on_div) {
// do stuff
}
}

try this code i hope this work
var mousePosition = {x:0, y:0};
document.addEventListener('mousemove', function(mouseMoveEvent){
mousePosition.x = mouseMoveEvent.pageX;
mousePosition.y = mouseMoveEvent.pageY;
}, false);
window.onkeydown = function(event) {
var x = mousePosition.x;
var y = mousePosition.y;
var elementMouseIsOver = document.elementFromPoint(x, y);
if(elementMouseIsOver.id == "box" && event.keyCode == "13") {
alert("You Hate Enter Dont You?");
}
}
DEMO

Cancel touchend if touchmove fires

I'm building something mainly for use on tablets, where the user can tap an item on the screen and a class is applied to it. This is what I have so far:
The problems:
I want to use touch events to remove the class and add the class on touch end (to make it faster).
I don't want it to do anything if the user swipes (touchmoves).
I've tried a number of things, none of which have worked. The simplest I've tried (unsuccessfully) is this:
var dragging = false;
$(".items").on("touchmove", function(){
dragging = true;
});
$('.items').on("click touchend", function(event){
if (dragging = true){
}
else{
$('.items').removeClass('selected');
$(this).addClass('selected');
}
});

I would argue this is a more safe way of doing it
Setting variable to false
var dragging = false;
Setting var to true ontouchmove (allows you to reuse this code everywhere in your app)
$("body").on("touchmove", function(){
dragging = true;
});
Your button
$("#button").on("touchend", function(){
if (dragging)
return;
// your button action code
});
Resetting variable (important)
$("body").on("touchstart", function(){
dragging = false;
});

You want to use either of the following:
if(dragging == true)
Or, simply:
if(dragging)
You should only use a single = sign when you are setting a value, whereas two == signs should be used when checking a value. Therefore, your code should look like:
$('.items').on("click touchend", function(event){
if(!dragging)
{
$('.items').removeClass('selected');
$(this).addClass('selected');
}
});
Notice how you do not need to check if dragging == true because you are not running any code in this case. Instead you can simply check if dragging == false or, !dragging

You can just check if event is cancelable. It's false after touchmove
$('.items').on("click touchend", function(event){
if (event.cancelable){
$('.items').removeClass('selected');
$(this).addClass('selected');
}
});

where you have dragging check put
if (dragging == true){
dragging = false;
}
else{
$('.items').removeClass('selected');
$(this).addClass('selected');
}
it will reset it on release
also watch out for double calls on events as they sometimes trigger twice on some platforms best to check platform with first the following will help with checks
var clickEventType=((document.ontouchstart!==null)?'click':'touchend');
or
var clickEventType = 'touchend';
if(document.ontouchstart!==null)
{
clickEventType = 'click';
}

The simplest solution to hide calendar on blur or click

http://jsfiddle.net/SXrAb/
Following the jsfiddle link there is a simplified sample of what I need. Currently it shows the calendar on button click, and hides it on input blur.
What I cannot implement additionally is hiding calendar on button click.
So - calendar should:
open on button click if hidden (done)
hide on blur (done)
hide on button click if opened (this is what I'm in stuck with, because blur is triggered before button click event so I have no chance to handle it properly)
UPD:
the solution is expected to work correctly in all cases, like "mousedown on button, drag below, mouseup" (otherwise I wouldn't ask it ;-)

Try this:
var $calendar = $('#calendar');
var mousedown = false;
$('#calendar-input').blur(function() {
if (!mousedown)
$calendar.hide();
});
$('#calendar-button').mousedown(function() {
mousedown = true;
});
$('#calendar-button').mouseup(function() {
mousedown = false;
});
$('#calendar-button').click(function() {
if ($calendar.is(':visible')) {
$calendar.hide();
}
else {
$calendar.show();
$('#calendar-input').focus();
}
});
Demo here: http://jsfiddle.net/Tz73k/
UPDATE: OK, I moved the mouseup event to the document level. I don't think the mouse state can be tricked now by dragging the mouse before releasing it:
var $calendar = $('#calendar');
var mousedown = false;
$('#calendar-input').blur(function() {
if (!mousedown)
$calendar.hide();
});
$('#calendar-button').mousedown(function() {
mousedown = true;
});
$(document).mouseup(function() {
mousedown = false;
});
$('#calendar-button').click(function() {
if ($calendar.is(':visible')) {
$calendar.hide();
}
else {
$calendar.show();
$('#calendar-input').focus();
}
});
Updated fiddle: http://jsfiddle.net/yQ5CT/

It's helpful to think of the calendar and the button as a set, where you only hide the calendar when everything in the set has blurred. To do this you need a system where focus can be "handed off" between the calendar and button without triggering your hide function. To do this you'll need a focus and blur handler on both your calendar and your button, as well as a state variable for isFocused.
var isFocused;
jQuery('#calendar,#calendar-button,#calendar-input').blur(function(){
isFocused = false;
setTimeout(function() {
if (!isFocused) { hide(); }
}, 0);
});
jQuery('#calendar,#calendar-button,#calendar-input').focus(function(){
isFocused = true;
});
The setTimeout is because, when you click the button, focus is lost on calendar before it's gained on the button, so there's momentarily nothing in focus.
Edit
I guess there's actually three elements in the set, the button, the textbox, and the calendar. I updated the example. This also fixes the issue that, in your example, you can't click between the calendar and the textbox without the calendar hiding. Presumably the real calendar can be manipulated by clicking it.
Edit 2
For this to work you'll need to make your calendar focusable by giving it a tabindex.
<span id="calendar" tabindex="-1">I'm a calendar ;-)</span>

Hiya Demo here http://jsfiddle.net/SXrAb/50/ -- (non alert version) http://jsfiddle.net/SXrAb/51/
Thanks zerkms!
JQuery Code
var $calendar = $('#calendar');
$calendar.hide();
var isBlurEventInvoked = true;
var calendarShow = false;
$('#calendar-input').blur(function() {
alert(isBlurEventInvoked + " ==== " + calendarShow);
if (isBlurEventInvoked && calendarShow){
$calendar.hide();
isBlurEventInvoked = true;
}
});
$('#calendar-button').click(function() {
if (!$calendar.is(':visible') && isBlurEventInvoked){
$calendar.show();
$('#calendar-input').focus();
calendarShow = true;
isBlurEventInvoked = true;
}else if ($calendar.is(':visible')) {
$calendar.hide();
isBlurEventInvoked = false;
calendarShow = false;
}
});
​

jQuery trigger event when click outside the element

$(document).click(function(evt) {
var target = evt.currentTarget;
var inside = $(".menuWraper");
if (target != inside) {
alert("bleep");
}
});
I am trying to figure out how to make it so that if a user clicks outside of a certain div (menuWraper), it triggers an event.. I realized I can just make every click fire an event, then check if the clicked currentTarget is same as the object selected from $(".menuWraper"). However, this doesn't work, currentTarget is HTML object(?) and $(".menuWraper") is Object object? I am very confused.

Just have your menuWraper element call event.stopPropagation() so that its click event doesn't bubble up to the document.
Try it out: http://jsfiddle.net/Py7Mu/
$(document).click(function() {
alert('clicked outside');
});
$(".menuWraper").click(function(event) {
alert('clicked inside');
event.stopPropagation();
});
http://api.jquery.com/event.stopPropagation/
Alternatively, you could return false; instead of using event.stopPropagation();

if you have child elements like dropdown menus
$('html').click(function(e) {
//if clicked element is not your element and parents aren't your div
if (e.target.id != 'your-div-id' && $(e.target).parents('#your-div-id').length == 0) {
//do stuff
}
});

The most common application here is closing on clicking the document but not when it came from within that element, for this you want to stop the bubbling, like this:
$(".menuWrapper").click(function(e) {
e.stopPropagation(); //stops click event from reaching document
});
$(document).click(function() {
$(".menuWrapper").hide(); //click came from somewhere else
});
All were doing here is preventing the click from bubbling up (via event.stopPrpagation()) when it came from within a .menuWrapper element. If this didn't happen, the click came from somewhere else, and will by default make it's way up to document, if it gets there, we hide those .menuWrapper elements.

try these..
$(document).click(function(evt) {
var target = evt.target.className;
var inside = $(".menuWraper");
//alert($(target).html());
if ($.trim(target) != '') {
if ($("." + target) != inside) {
alert("bleep");
}
}
});

$(document).click((e) => {
if ($.contains($(".the-one-you-can-click-and-should-still-open").get(0), e.target)) {
} else {
this.onClose();
}
});

I know that the question has been answered, but I hope my solution helps other people.
stopPropagation caused problems in my case, because I needed the click event for something else. Moreover, not every element should cause the div to be closed when clicked.
My solution:
$(document).click(function(e) {
if (($(e.target).closest("#mydiv").attr("id") != "mydiv") &&
$(e.target).closest("#div-exception").attr("id") != "div-exception") {
alert("Clicked outside!");
}
});
http://jsfiddle.net/NLDu3/

I do not think document fires the click event. Try using the body element to capture the click event. Might need to check on that...

This code will open the menu in question, and will setup a click listener event. When triggered it will loop through the target id's parents until it finds the menu id. If it doesn't, it will hide the menu because the user has clicked outside the menu. I've tested it and it works.
function tog_alerts(){
if($('#Element').css('display') == 'none'){
$('#Element').show();
setTimeout(function () {
document.body.addEventListener('click', Close_Alerts, false);
}, 500);
}
}
function Close_Alerts(e){
var current = e.target;
var check = 0;
while (current.parentNode){
current = current.parentNode
if(current.id == 'Element'){
check = 1;
}
}
if(check == 0){
document.body.removeEventListener('click', Close_Alerts, false);
$('#Element').hide();
}
}

function handler(event) {
var target = $(event.target);
if (!target.is("div.menuWraper")) {
alert("outside");
}
}
$("#myPage").click(handler);

try this one
$(document).click(function(event) {
if(event.target.id === 'xxx' )
return false;
else {
// do some this here
}
});

var visibleNotification = false;
function open_notification() {
if (visibleNotification == false) {
$('.notification-panel').css('visibility', 'visible');
visibleNotification = true;
} else {
$('.notification-panel').css('visibility', 'hidden');
visibleNotification = false;
}
}
$(document).click(function (evt) {
var target = evt.target.className;
if(target!="fa fa-bell-o bell-notification")
{
var inside = $(".fa fa-bell-o bell-notification");
if ($.trim(target) != '') {
if ($("." + target) != inside) {
if (visibleNotification == true) {
$('.notification-panel').css('visibility', 'hidden');
visibleNotification = false;
}
}
}
}
});