我有一个设置，我试图在div上分配mouseover和mouseout事件，但它们似乎没有被触发。现在我只是让它尝试console.logmouseout事件，并为body添加类，以及mouseover事件。
我尝试使用.addEventListener('mouseover', function(){})而不是.onmouseover无济于事。我也试过mouseenter和mouseleave，但这些都是IE唯一的事件。
我需要使用纯JavaScript，而不是任何第三方库，这也需要在IE8+工作。
HTML

<div class="of_expandable" data-channel="2935725596001" data-muted="1" data-skin="dark"></div>

JS

/*
    for each expandable element this function:
    - parses the data attributes for handing to the embeds
    - styles the expandable div
    - binds the hover event to the div
*/
function processExpandable (elm, index){
    elm.className += " processed";
    elm.id = exp_ns + "_expandable_" + index;

    // option parsing
    var options = {};
    options.skin = elm.getAttribute("data-skin");
    if(!options.skin){
        options.skin = 'light';
    }

    // styling
    elm.style.width = "300px";
    elm.style.height = "250px";
    elm.style.position = "relative";
    elm.style.backgroundColor = "#000";

    // add events to elm
    elm.onmouseover = function (){
        launchModal(elm, options.skin);
    };
    elm.onmouseout = function (){
        console.log('mouseout');
    };
}

/*
    opens the modal and populates
*/
function launchModal (elm, skin){
    console.log('entered');
    document.body.className += " " + exp_ns + "_modal_open modal_skin_" + skin;
}

/*
    closes the modal and clears
*/
function closeModal (){
    // TODO: clear data from modal
    var pattern = "/\b" + exp_ns + "_modal_open\b/";
    document.body.className = document.body.className.replace(pattern,'');
    var pattern = "/\bmodal_skin_light\b/";
    document.body.className = document.body.className.replace(pattern,'');
    var pattern = "/\bmodal_skin_dark\b/";
    document.body.className = document.body.className.replace(pattern,'');
}

/*
    adds the modal element waiting to be triggered by the expandables
    - adds background
    - adds modal box
*/
function addModal (){
    var modalHTML = '<div id="' + exp_ns + '_modal" class="exp_modal"></div><div id="' + exp_ns + '_modal_back" class="exp_modal_back"></div>';
    document.body.innerHTML += modalHTML;
}

/*
    tests if an element has a class
*/
function hasClass(elm, cls) {
    return (' ' + elm.className + ' ').indexOf(' ' + cls + ' ') > -1;
}
var exp_ns = "of"
  , expandables = getElementsByClassName(exp_ns + '_expandable')
  , hoverTimer
  , hoverPause = 1000;

if(expandables.length > 0){
    for (var i = 0; i < expandables.length; i++){
        if(!hasClass(expandables[i], "processed")){
            // make sure we arent adding twice from a double include
            processExpandable(expandables[i], i);   
        }
    }
    // make sure we arent adding twice from a double include
    var modal = document.getElementById(exp_ns + '_overlay');
    if(!modal){
        addModal();
    }
}else{
    console.log('warning: no expandable elements found');
}

这里有一个JSFiddle

方案更新：

因此，看起来这个中断的原因是因为我使用document.body.innerHTML +=插入模态元素的方式。我认为它必须读取所有带有新附加内容的innerHTML。作为一个更好的解决方案，我使用了这个：

function addModal (){
    var modalBack = document.createElement("div");
        modalBack.setAttribute("class", "exp_modal_back");
    document.getElementsByTagName("body")[0].appendChild(modalBack);
    var modalCont = document.createElement("div");
        modalCont.setAttribute("class", "exp_modal");
    document.getElementsByTagName("body")[0].appendChild(modalCont);
}

更新JSFiddle