Question

我需要在点击工具上显示通知列表。但onblur（）根本不起作用。这是小提琴：http://jsfiddle.net/eX2zQ/

代码：

HTML： -

<div class="one" onclick="hidetwo();" onblur="remove_the_notification();">
    <div> 
        <ul class="dropdown" id="notification" >
            <li><a href="#">kjhlkjhkjhklhjklj</a></li>
            <li><a href="#">kjhlkjhkjhklhjklj</a></li>
            <li><a href="#">kjhlkjhkjhklhjklj</a></li>
            <li><a href="#">See_All</a></li>
        </ul>       
</div>
</div>

CSS： -

.one{
    overflow: visible; 
    width: 21px; 
    height: 21px; 
    background-color:black; 
}

JS： -

var show=0;

    function hidetwo(){
    if (show==0){
    document.getElementById('notification').style.display="block";
    show=1;
    }
    else if (show==1){
    document.getElementById('notification').style.display="none";
    show=0;
    }
    }

function remove_the_notification(){
    alert('hide one');
    if (show==0){
    document.getElementById('notification').style.display="block";
    show=1;
    }
    else if (show==1){
    document.getElementById('notification').style.display="none";
    show=0;
    }
}

Answer 1

您在JSFiddle选项中选择了onLoad。这意味着在页面上的所有内容都加载后，您的函数将被挂起，因此在附加处理程序时它们的引用不可用。此外，AFAIK，没有contenteditable您无法“模糊”<div> - 此事件通常用于输入等表单元素。也许你的意思是onmouseleave？

<div class="one" onclick="hidetwo();" onmouseleave="remove_the_notification();">

JSFiddle

Answer 2

使用onmouseout。当鼠标移出div时会触发。

W3Schools onmouseout

Answer 3

onBlur()事件适用于input等text,file元素。它无法用于div，因此请尝试onmouseLeave(),onmouseout()

<div class="one" onclick="hidetwo();" onmouseout="remove_the_notification();">

Answer 4

要在onblur元素上处理DIV事件，您需要为tabindex添加DIV属性。例如：

<div class="one" onclick="hidetwo();"
     tabindex="0" onblur="remove_the_notification();">
  ...
</div>

当onclick（）工作正常时，onblur（）无效

4 个答案: