JSFiddle - React, Tailwind, and code Playground

by twobin

HTML

<div class='mod-spm'data-spmid='123'>
        <div class='child_a'></div>
        <div class='child_b'></div>
        <div class='child_c'></div>
        <div class='child_d'></div>
    </div>
    <div class='mod-spm' data-spmid='456'>
        <div class='child_a'></div>
        <div class='child_b'></div>
        <div class='child_c'></div>
        <div class='child_d'></div>
    </div>
    <div class='mod-spm' data-spmid='789'>
        <div class='child_a'></div>
        <div class='child_b'></div>
        <div class='child_c'></div>
        <div class='child_d'></div>
    </div>

CSS

.mod-spm{
    height:100px;
    background:red;
    margin:2px;
}

JavaScript

function bind(elem, type, fn) {
    var newfn = function () { fn.apply(elem, arguments); };
    if (elem.addEventListener) {
        elem.addEventListener(type, newfn, false);
    } else {
        elem.attachEvent("on" + type, newfn);
    }
    return newfn;
}
Array.prototype.forEach.call(document.getElementsByClassName('mod-spm'),function(elem, index){
    var totalTime = 0; //ms
    var spmid = elem.getAttribute('data-spmid');
    var enterTime, leaveTime;    
    var testDivShowTotalTime = document.createElement('div');    
    
    function showStayTime(){
        var msg;
        msg = 'mod-spm[data-spmid="'+spmid+'"] 總停留時間：' + totalTime + 'ms';
        testDivShowTotalTime.innerText = msg;
    }    
    elem.appendChild(testDivShowTotalTime);
    bind( elem, 'mouseenter', function(){
        enterTime = new Date();
    });
    
    bind( elem, 'mouseleave', function(){
        totalTime += new Date().getTime() - enterTime.getTime();
        
        showStayTime();
    });
    
    showStayTime();
});