We Keep Coding

Hide context menu on outside click

I have a context menu that appears when you right click inside the <div>, and it only goes away if the user click left click inside the <div> again.
How do i hide it when a user click anywhere on the page?
my fiddle

change these two functions to the following:
_onPageClick: function(e) {
e.stopPropagation()
if (this.refs.contextMenu.getDOMNode() !== e.target){
this.contextMenu.setState({contextMenuLocation: ''});
}
},
componentDidMount: function(){
this.contextMenu = this.refs.contextMenu;
document.addEventListener('click', this._onPageClick)
},
all we have to do is to move _onPageClick from the wrapper div to a listener on the document. the above code will close the menu if the user clicks anywhere that is not inside the context menu. if you want it to close if the user clicks the context menu as well, then change _onPageClick to:
_onPageClick: function(e) {
e.stopPropagation()
this.contextMenu.setState({contextMenuLocation: ''});
}
(also, the wrapper div should no longer have the onClick handler)
http://jsfiddle.net/yikevinqu/eeu9unhm/1/

Check out Ben Alman's clickoutside jQuery plugin. Even if you are not using jQuery, you can review his mechanism for catching these click events as they bubble up.
http://benalman.com/projects/jquery-outside-events-plugin/
All click events get bubbled up through the DOM, so if you click an inner element, if you don't event.stopPropagation(), it will bubble up to the parent element. So just catch the click on the parent element (can even be document to hide your context menu).
Check out my fiddle for a pure JS example: http://jsfiddle.net/jsc8zLaj/

There's actually an existing React mixin on npm you can use for this:
https://github.com/Pomax/react-onclickoutside
Since mixins have fallen out of favour now, you may want to implement it as a wrapper component instead, but this is an excellent starting point.

Synchronizing top-nav mouseleave for a tab and its associated submenu

I'm trying to create a top-nav menu as follows:
The idea is that when you click a tab, the tab itself gets highlighted in black and an associated menu shows up beneath it. This works fine.
I also want the menu to disappear and the tab to be unhighlighted if the mouse leaves either the tab or the menu. This is where I'm running into trouble. At the moment, the JQuery I use to handle this is roughly as follows:
$('.item-support a').click(function(e){
// removeClass('curr') from all other tabs
$('.item-support').addClass('curr');
$('#submenu-support').fadeIn('fast');
$('.item-support').mouseleave(function(e) {
$('.item-support').removeClass('curr');
$('#submenu-products').fadeOut('fast');
});
}else{ // Click again
$('.item-support').removeClass('curr');
$('#submenu-support').fadeOut('fast');
}
return false;
});
$('#submenu-products').mouseleave(function(e) {
$('.item-support').removeClass('curr');
$('#submenu-products').fadeOut('fast');
});
// Similar code for the other tabs
The problem is that the mouseleave events for the tab and sub-menu are not synchronized. So, for example, if the mouse leaves the support tab and enters the submenu below it, the submenu vanishes. I've tried many different approaches to get around this and even have one that crudely works using pageX and pageY co-ordinates, but I'm looking for a more elegant solution. How do I get the tab and its associated submenu to work in tandem? Is there a way to bind the two divs together? Or make mouseleave recognize an exception when entering a certain div?

You can check if either element is hovered, and do something like this:
$('.item-support, #submenu-support').mouseleave(function() {
setTimeout(function() {
if (!$('.item-support').is(':hover') && !$('#submenu-support').is(':hover')) {
$('.item-support').removeClass('curr');
$('#submenu-support').hide();
}
}, 50);
});
You also shouldn't bind your mouseleave event in the callback of another event. Currently every time you click item-support, you are binding another mouseleave event to it.

JQuery OnDrag fire a click when hovered

I have a drag-drop-application which uses JQuery UI onDrag and onDrop. This application is a room reservation system that have tabs. I have made the drop-working perfectly, but there is one functionality I really want (if possible).
Is there a way to create a event-handler for the tabs, that fires only if you are dragging an element?
Example: You want to move a person from Tab1 to Tab2, without clicking the tab, you can only drag the person -> hover the tab -> then the tab gets clicked.

There is no specific event handler for dragging an element, but by manipulating other events, you can make it work.
The trick is to use the mousemove event, but make it only work when the mouse has been pressed down on the draggable element. Therefore, we make a certain Boolean true in the mousedown event and then make it false in the mouseup event. The mousemove event checks if the Boolean and runs its code if and only if the Boolean is true.
Here's an example:
$(document).ready(function() {
//Make draggable draggable
$("#draggable").draggable();
//mousedown and mouseup Boolean
var drragging = false;
$("#draggable").mousedown(function() { dragging = true; });
$("#draggable").mouseup(function() { dragging = false; });
//mousemove event -> mousedrag event
$("#draggable").mousemove(function() { if (dragging) {
//The event:
$("#draggable").css("color", "rgb("+Math.round(255*Math.random())+", "+Math.round(255*Math.random())+", "+Math.round(255*Math.random())+")");
}});
});
<span id="draggable">Drag me!</span>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script>

Prevent context menu and mouse drag on all elements but one

I am trying to prevent right click context menu, and mouse drag on every element on my page except for one called 'IPAddress'.
Using the code below would seem to do the job, but I still cannot select the element 'IPAddress'.
How can this be altered to allow for this behavior?
html.on('selectstart dragstart contextmenu', function (evt) { // prevent right click, and mouse drag
if (html.not('#IPAddress')) {
evt.preventDefault(); return false;
};
});

Try this:
if (!$(evt.target).is('#IPAddress'))
jQuery not is intended for elements-set filtering, and is not the opposite of is.

Closing a menu on mouseout

I have a button that when clicked will popup a menu to the right of the button. This menu is a rather large UL of list items. The page that this menu is on contains lots of other elements.
Once the menu pops up, a user can click an option on the menu and the menu will disappear (menu.hide()).
However, it feels wierd not being able to get rid of the menu any other way. I like the idea of "if the user clicks on anything but the menu, the menu will hide." But i hate doing a "clickoutside" event that binds events to everything but the menu.
Another option is "mouseout" but "mouseout" always gets fired too early, because the mouse has to travel across the screen to get to the menu.
Any ideas on what event I can bind to the menu, so the user can get rid of it naturally, and at will? (not just when he clicks an option)

You can bind one event to the body when the menu is open. Use the click event to determine if the click occurred outside of the menu. If outside of the menu, hide the menu and remove the bind.
// binding function
closeMe = function(e) {
var $target = $(e.target);
// click is not inside the menu
if(!$target.hasClass('menu') && $target.parents('.menu').length !== 1) {
// hide menu
menu.hide();
// unbind events
$('body').unbind('mousedown.menuhide', closeMe);
}
};
// show menu
menu.show(function() {
// bind menu hide event
$('body').bind('mousedown.menuhide', closeMe);
});

Very easy, just use something like this
$('html').click(function() {
menu.close();
});
$('#menu').click(function(e){
e.stopPropagation();
// do stuff
// maybe some nice animation or w/e
menu.close();
});