How to detect click outside window - javascript

I have a customized dropdown in html coded in "ul" and "li", I show options when a user clicks on the head of "ul" I would like to hide these elements when the user clicks outside the menu area.
Is something like this possible with javascript/YUI not Jquery?

I'm not a YUI guy, so I suspect this could be written a bit better, but I have tested it and it works.
Hide the dropdown anytime the document is clicked:
Y.one(document).on("click", function(){
Y.one("#menu").hide();
});
Prevent clicks on the ul from propagating to the document:
Y.one("#menu").on("click", function(e){
e.stopPropagation();
});
If the visitor clicks anywhere, the click will bubble up to the document, and hide the menu. If they click on the menu, the event will be prevented from bubbling up to the document, and as such the menu will not be hidden.
Demo: http://jsfiddle.net/nHnZT/

use('event-outside') adds support for "outside" events. See the user guide for details: http://yuilibrary.com/yui/docs/event/outside.html

Related

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.

preventDefault but activate links

In my navigation menu, I have a dropdown that I want to use. The actual dropping down is fine, and I've prevented the automatic bubbling by using preventDefault(); but now all the links within the dropdown no longer work.
How do I make it so that the dropdown works, doesn't bubble and all the links within the dropdown work?
Edit: I've also used event.stopPropagation() to no effect either. What's going on here?!
This is my code:
// Toggle dropdowns
$('.menu-item-has-children').click(function(e){
e.preventDefault();
$(this).find('.sub-menu').toggleClass('open');
});
To stop bubbling, use event.stopPropagation().
Only use event.preventDefault() to prevent the default action of the event from happening.
Ah, now I see your problem. The issue is that when clicking a menu item to open a submenu, since the item is an anchor pointing to #, the document will scroll to top.
To avoid that, I suggest getting rid of href="#".
Alternatively, you can use preventDefault only if the clicked element was that element, not a descendant:
$('.menu-item-has-children').on('click', function(e){
if(this == e.target) e.stopPropagation();
// ...
});
Demo
You can check which element was clicked by using e.target, and if the clicked element was a sub menu link, don't preventDefault

hide an element when click any other place(outside the element) on the page

I am working on a popup menu in my web page. currently, I can successfully display the menu. What I want to do is hiding the menu when I click outside of the menu. I know one way to do this is bind the click event to the document:
$(document).on('click', function(event) {
// here I can hide the menu
});
but I don't want to do that way, because binding an click event to the document looks very ugly and make the code difficult to maintain.
many many thanks.:)
You can wrap your popup menu like this:
<div class="overlay">
<div class="popup">...</div>
<div>
And then
$(".overlay").click(function(){
// hide your popup
})
It would be good to make the overlay position:fixed

How to prevent click event to trigger show/hide?

There is a clickable layer. On click it reveals/hides some extra content. Within this layer there is a link which triggers another page to load in the browser.
When this link is clicked the clickable layer is clicked too because it contains the link. How can I avoid that?
I want the link to work but while the user clicks on it the extra content should not be shown.
I tried with
$('.link').click(function(event){
return false;
});
but this disables both hide/show and the link to work. Any ideas? Here is my fiddle: http://jsfiddle.net/ZkPLD/
Use stopPropagation to avoid events bubbling up:
$('.link').click(function(event){
event.stopPropagation();
});

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();
});

Categories