jquery之如何禁用 div 上的绑定(bind)

假设我有这个 HTML:

<body> 
    <div id="topbar"> 
        First block here. 
        <p>Another block here.</p> 
    </div> 
    <div class="header"> 
        <div class="container"></div> 
    </div> 
    <div id="footer">Footer</div> 
</body> 

如何禁用 div#topbar 上的bind？

$('body').bind('mouseover mouseout', function(event) { }); 

我已经尝试过但没有成功:

if($(event.target).is('#topbar')) { //do nothing } 
else { //do stuff } 

实际上，我的问题是，如果我将鼠标悬停在 p 标记上，代码将不起作用。

PS:我对 HTML 没有任何控制权，所以我必须使用像 body 这样的通用标签。

谢谢。

请您参考如下方法:

尝试为正文的其余部分创建另一个 div:

<body> 
    <div id="topbar">hello 
        <div>How<br>are<br>you<br>today<br>?</div> 
    </div> 
    <div id="mouseEvent"> 
        <div class="header"> 
            <div class="container"></div> 
        </div> 
        <div id="footer">Footer</div> 
    </div> 
</body> 

和js:

$('body').bind('mouseover mouseout', function(event) {  
    var list = $('#topbar').find( "*" ); 
    if($(event.target).is("#topbar") || $(event.target).is(list)) {  
        alert("hello"); 
    } else {  
        alert("footer"); 
    } 
}); 

更新: JSFiddle