Question

我有一个设置，我尝试在mouseover上分配mouseout和div事件，但他们似乎没有被解雇。现在我只是尝试console.log mouseout事件，并将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

Answer 1

您可以尝试这种方式：

 <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

Answer 2

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

另外，我认为你在“launchModal”函数中遇到了问题。你真的想继续在身体的class属性中添加和添加值吗？

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

2 个答案: