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（）工作正常

回答

相關問題