click-at-outside
v1.0.3
Published
detect outside a component click event
Downloads
16
Readme
click-at-outside
WTF
Detect a click event was outside in a container.
eg: you have a dropmenu, and you want close itself when user click outside the #dropmenu
dom container.
Usage
npm i click-at-outside --save
const cancle = clickAtOutside(
element, // document.querySelctor || $('xxx').get(0)
func, // when click is outside the element then do something
);
// if then event was outdate, you should cancel listen
cancle();
Example
<div id="dropmenu">
<div id="avatar"></div>
<ul class="menus">
<li><a href="javascript:;">menu1</a></li>
<li><a href="javascript:;">menu2</a></li>
<li><a href="javascript:;">menu3</a></li>
</ul>
</div>
import { isMobileUA } from 'mdetect';
import clickAtOutside from 'click-at-outside';
const $dropmenu = document.querySelector('#dropmenu');
const $avatar = document.querySelector('#avatar');
$avatar.addEventListener('click', () => {
$dropmenu.classList.add('active');
if (isMobileUA()) document.body.style.cursor = 'pointer';
});
clickAtOutside(
$dropmenu,
() => $dropmenu.classList.remove('active')
);
Why not using pure CSS3 :hover for dropmenu?
Pure CSS3 dropmenu was very simple, but it won't close when you tap blank area(mobile device).
Why css('cursor', 'pointer') for body?
In mobile safari, click event usually won't bubbling to document
.
Expect:
- The target element of the event is a link or a form field.
- The target element, or any of its ancestors up to but not including the , has an explicit event handler set for any of the mouse events. This event handler may be an empty function.
- The target element, or any of its ancestors up to and including the document has a cursor: pointer CSS declarations.