mouseover 和 mouseout 事件不使用纯 js 触发

Question

我有一个设置，我试图在 div 上分配 mouseover 和 mouseout 事件，但它们似乎没有触发。现在我只是让它尝试console.logthe mouseout 事件并将类添加到body 以及mouseover 事件。

我尝试使用 .addEventListener('mouseover', function(){}) 而不是 .onmouseover 无济于事。我也尝试过mouseenter 和mouseleave，但这些只是 IE 事件。

我需要使用纯 Javascript 而不是任何 3rd 方库，这也需要在 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

Answer 1

您的问题不在于您如何使用事件处理程序。问题是由在“processExpandable”函数之后调用的“addModal”函数引起的。我不明白你想要完成什么，所以我无法帮助你，但这是一个开始。

另外，我认为您的“launchModal”功能有问题。您真的要继续为 body 的 class 属性添加和添加值吗？

Answer 2

你可以试试这个方法：

 <div style=" height: 200px; width:200px; background-color: black;" 
       onmouseover="displayElement('myDiv');"
       onmouseout="hideElement('myDiv');">
       <div id="myDiv" class="of_expandable" data-channel="2935725596001" data-muted="1" data-skin="dark" style="width:100%; height:100%;display: none; background-color:green;">Content</div>
</div>

这里有一个JSBin 给你看