What’s it for?

El. contains(node) is used to determine whether an element is inside another element. The “drop down” and “bubble dialogs” in general pricing libraries use this feature to “click outside the component to close the component”.

Line 17: clickOutside

This article is not about implementing a “bubble” component, but about implementing a common feature in a component: clicking outside of an element.

Source: github.com/any86/6h/bl…

The ultimate goal

// Start listening
const cancel = clickOutside(el, e= >{
    // Click el external trigger
});
// Cancel the listener
cancel();
Copy the code

The principle of

  1. Listening to thedocumentthetouchendandclickEvents.
  2. Judge in event callbacksevent.targetWhether the element that currently triggers the event is in the target elementSee code comments for details.

The implementation code

Code based on TS implementation, 🤖 but as long as js can understand.

const eventNames = ['click'.'touchend'];
export default function (el: Node, callback: (ev:Event) = >void) {
    let isTouch = false;
    function handler(ev: Event) :void {
        // touchend
        if (eventNames[1] === ev.type) isTouch = true;
        // Disallow click after touchend on mobile
        if (eventNames[0] === ev.type && isTouch) return;
        // Check if the click element is outside el
        // Since ev.target is EventTarget,
        // The contains method contains an argument of type Node,
        // EventTarget is also a DOM element
        // So use type assertion here, annotated as Node type
        if(! el.contains(ev.targetas Node)) callback(ev);
    }

    eventNames.forEach(name= > {
        document.addEventListener(name, handler);
    });

    return (a)= > {
        eventNames.forEach(name= > {
            document.removeEventListener(name, handler); }); }}Copy the code

extension

As an “icing on the cake” feature, we can simulate the native Event click-outside with new Event(), which we can use in 🤖vue:

<div @click-outside="onCall"></div>
Copy the code

The logic here is also very simple, not to expand the explanation, if necessary, please see my previous post: juejin.cn/post/684490…

Plan (6h warehouse)

Whenever I find reusable “short code” in my work, I try to keep the generation size within 1KB. I always use typescript to encapsulate functions for everyone to learn. Now I have added 2 examples:

@6h/be-full displays any elements in full screen, supports PC/ mobile terminal, less than 1kb.

@6h/click-outside Click point element trigger callback outside, support mobile/desktop.

🔥typescript

The basic tutorial starts here

Lesson one: Play with typescript

Lesson two, basic types and introductory advanced types

Lesson three: Generics

Lesson four: Reading advanced types

Lesson 5: What is a namespace

Special, learn typescript in vue3🔥 source 🦕 – “is”

Lesson 6. What is a declare? 🦕 – Global declaration

🔥typescript – Full screen browser (59 lines)

🔥 previous popular articles

🔥 Common regulars daquan 2020

🚆 novice front end don’t panic! Here you ✊10 straws 🍃

True.1px border, 🚀 supports any number of edges and rounded corners, 1 catall method

🚀 Reveal 5 “wheels not made by author” in vue/ React component library 🤚

The Vue/React UI library uses several DOM apis 🚀

weibo

Just play micro blog, we can follow each other, hey hey

WeChat group

Thank you for your reading. If you have any questions, you can add me to the wechat group, and I will pull you into the wechat group (Because Tencent limits the number of wechat groups to 100, when the number exceeds 100, you must be joined by group members).