jh-outside-click
Vue click outside directive.
Installation
$ npm install jh-outside-click
Example
main.js
;Vue;
template
Todo
methods
methods:{}
Blog
In daily development, we often encounter such needs
Trigger an event when clicking outside a specific element
Specifically, when making a pop-up window, click on any part outside the pop-up window, such as the mask layer, the pop-up window is automatically closed.
Specific element
:Popup content layer
External element
:Everything except the content layer
The conventional approach is to set the mask layer and the content layer is not a parent-child element, and then specifically register the click event on the mask layer, and when the mask layer is clicked, trigger the method of closing the pop-up window.
This is actually a way to save the country by curve
, but it only achieves the effect of triggering a specific event, and does not listen to clicks on external elements.
If at this time I said, there is no mask layer, then how to achieve it?
The method is actually very simple, isn't it an external element? We register the temporary event directly on the body to determine whether the click element is outside the specific element
, and if so, trigger the close method.
How to register for a temporary event?
Registering events on the body is global, and every element is listened to. How can it be done temporarily?
We only need to remove the body listener in the close method, so we can temporarily listen.
How to judge whether it is an external element?
There are two ways, the first one is the simplest, using contains
node.contains( otherNode )
- Whether node contains a otherNode node.
- Whether otherNode is a descendant node of node.
Returns true if otherNode is a descendant node of node or the node node itself, otherwise returns false.
The second method is to use getBoundingClientRect
Element.getBoundingClientRect() ,returns the size of the element and its position relative to the viewport
By comparing the coordinates of the currently clicked element with the location information of the specific element, it can also be determined whether it is an external click.
Implemented on native javascript
documentbody; // Insert popup content// Add a custom attribute (method) on the pop-up window domthisel { if !thisel this; };;
{ // todo // Remove event documentbody; // Delete attribute delete thisel__outsideClickEvent__;}
Implemented on vue On vue we use more custom instructions, as follows
directives: 'out-side-click': { el { // Can also be checked using getBoundingClientRect if !el bindingvaluee; }; ; } { documentbody; delete el__outsideClickEvent__; }
By the way
If there is no mask layer element, how do you achieve the translucent effect of the non-popular window area?
outline
can help us solve the problem, set a size large enough.
Of course, if there is a need to do operational guidance, outline
is also a good choice.