onblur（）不工作，而onclick（）工作正常

我需要使通知列表出现在点击工作正常。但是onblur（）根本不工作。这里是小提琴：http://jsfiddle.net/eX2zQ/onblur（）不工作，而onclick（）工作正常

代码：

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; 
    } 
}

来源

2014-03-06 Tarsem Singh

你在JSFiddle选项中选择了onLoad。这意味着在页面上的所有内容都被加载后，你的功能被挂起，因此在附加处理程序时它们的引用不可用。此外，AFAIK，没有contenteditable你不能'模糊'<div> - 这个事件通常是像输入的形式元素。也许你的意思是onmouseleave？

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

JSFiddle

来源

2014-03-06 12:34:41 George

实测值[讲讲]（http://help.dottoro.com/ljewsllu.php）'onmouseleave'。 “onmouseleave事件只有Internet Explorer支持，对于跨浏览器解决方案，使用onmouseout事件。onmouseleave和onmouseout事件之间的唯一区别是onmouseout事件向上传播文档层次结构，而onmouseleave事件不传播。 – KoalaBear

非常感谢。 onmouseleave正在完美工作。我以前不知道这一点。 –

使用onmouseout这一点。这会在鼠标移出div时触发。

W3Schools onmouseout

来源

2014-03-06 12:36:19 KoalaBear

onBlur()事件将像text,fileinput元素工作。它不会工作div，所以请尽量onmouseLeave(),onmouseout()

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

来源

2014-03-06 12:37:39

为了onblur事件中，你需要添加tabindex属性为DIVDIV元素上工作。例如：

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

来源

2014-03-06 12:42:55

有趣。不知道你能做到这一点。 – Spedwards

我建议你使用其他人建议的onmouseout事件。 – Blackunknown

@Blackunknown，号码添加'tabindex'后，'div'元素可以接收和失去焦点。 http://jsfiddle.net/eX2zQ/4/ –

onblur（）不工作，而onclick（）工作正常

回答

相关问题