Как проверить оставление мышью на элементе в javaScript?

Question

У меня есть элемент .context-box, в этот элемент я добавляю событие перемещения мыши. Но мой вопрос, как проверить это, когда я оставляю свою мышь от элемента после перемещения мыши?

другой вопрос, как называется этот эффект?

mySimpleEffect [Нужно исправить]:

/***
 * 
 * @app
 * This is the main file for this project
 * 
 * @author Md Tahazzot Islam
 * @date   N/A
 * @file_info N/A
 * 
 */



/***
 * 
 * @get
 * get the wrapper and context-box
 */

let

    wrapper = document.querySelector('.wrapper'),
    box = document.querySelector('.context-box'),
    trigger = false,
    startY = 0,
    endY = 0,
    mouseover = false;



/***
 * 
 * @stuff
 * Action area ;)
 */

(function (factory) {


    //call the factory 
    if (typeof factory === 'function')
        factory()

}(function () {

    /****
     * 
     * @event
     * Here I will manage all the events..
     * 
     */
    function on(event, elm, func) {
        if (elm.addEventListener)
            elm.addEventListener(event, func);
    }

    on('mousedown', box, function (e) {
        //re-assign the trigger
        trigger = !trigger ? true : false;

        //re-assign the first clicked position 
        startY = e.pageY;

        /***
         * 
         * @only_style
         * THis is for mouse style
         */
        box.style.cursor = 'grabbing';
    });


    on('mouseup', box, function () {
        //re-initilized the trigger
        trigger = trigger ? false : true;

        //re-initilized the first position 
        startY = 0;

        //re-initilized the box position
        box.style.top = '0px';

        /***
         * 
         * @only_style
         * THis is for mouse style
         */
        box.style.cursor = 'grab';
    });


    on('mousemove', box, function (e) {
        //check the trigger first if not triggered then do nothing...
        if (!trigger)
            return false;

        if (Math.abs(e.pageY - startY) < 200)
            box.style.top = e.pageY - startY + 'px';
    });

}));

*,:after,:before{box-sizing:border-box}body{margin:0;font-family:"Sans-serif",Segoe UI,arial;font-size:1rem;font-weight:400;line-height:1.4;color:#444}article,caption,div,figcaption,figure,footer,header,section{display:block}a{text-decoration:none;color:#007bff}a:hover{text-decoration:underline}a,button,input,select{font-family:inherit;font-size:inherit}.wrapper{width:100%;max-width:450px;margin:auto;margin-top:2rem;border:1px solid #d1d5da;border-radius:0.25rem;padding:1.5rem;overflow:hidden}.context-box{border:1px solid #d1d5da;border-radius:0.25rem;padding:1.5rem;cursor:grab;position:relative}h1{font-weight:400!important;font-size:2.5rem;margin:auto;margin-top:0;bottom:1rem;font-family:Sans-serif;user-select:none;-webkit-user-select:none;-moz-user-select:none}.badge{display:inline-block;margin-bottom:0.5rem;padding:0.15rem 1rem;border:1px solid rgba(0,0,0,0);background-color:#51de97;font-size:80%;border-radius:50px;color:white;user-select:none;-webkit-user-select:none;-moz-user-select:none}

    <section class="wrapper">
        <div class="context-box">
            <h1 class="title">
                Eoeropeans are not able to do this work in this situation
                that's come over to us.
            </h1>
            <div class="badges">
                <span class="badge badge-success">+99 respoeratory</span>
                <span class="badge badge-info">100% c++</span>
            </div>
            <div class="text">
                Lorem ipsum, dolor sit amet consectetur adipisicing elit. A, alias.
                <br />
                Lorem ipsum dolor sit amet consectetur adipisicing elit. Eos porro, tenetur magnam doloribus molestiae
                hic sunt mollitia facilis dolores ea!
            </div>
        </div>
    </section>

Answer 1

Используйте это:

document.querySelector('.content-box').addEventListener('mouseout', function() {
    console.log('mouseout event triggered.');
});