События mouseover и mouseout не запускаются с использованием чистого js

У меня есть настройки, где я пытаюсь назначить mouseover а также mouseout событие на div, но они, похоже, не стреляют. Прямо сейчас я просто пытаюсь 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

Источник

3 ответа

Решение

Ваша проблема не в том, как вы используете обработчики событий. Проблема вызвана функцией "addModal", вызываемой после функции "processExpandable". Я не понимаю, чего вы пытаетесь достичь, поэтому я не могу вам помочь, но это только начало.

Кроме того, я думаю, что у вас есть проблема в функции "launchModal". Вы действительно хотите продолжать добавлять и добавлять значения в атрибут класса тела?

Источник

Вы можете попробовать так:

 <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, чтобы показать вам

Источник

Для тех, кто спотыкается об этом вопросе, возможно, сначала проверьте, не указали ли вы желаемый элемент.pointer-events: none;сначала в CSS, как я сделал.

Источник
Другие вопросы по тегам