學習起步時，本人試着在web端界面上仿照qq客戶端主菜單，做出了一個界面。
當做到qq主菜單的搜索框時，發現點擊搜索框后，里面的背景圖片會消失，如下面2張圖所示：
點擊前 點擊后
盡管類似這種判斷鼠標是否點擊在div外，以更改背景圖片的應用在web開發中並不多見，但是我們還是需要明白，應如何實現對鼠標是否點擊在div外的判斷。
在這里，我采用了如下代碼：
$(document).click(function(e) //e代表事件，在firefox中只能在事件現場使用window.event
{
var target=$(e.target); //把觸發這次點擊事件對象拿出來，在本例中，即id為“sousuokuang”的div
if(!target.is('#sousuokuang')) //判斷出發點擊事件的對象名稱是否為"sousuokuang"
{
//alert("hello!"); 調試時用到的，可以忽略
document.getElementById("sousuokuang").style.background= "url('sousuo.png') no-repeat -2px -7px";
//如果不是"sousuokuang"，保持它的背景圖片不變
}
else
{
document.getElementById("sousuokuang").style.background="white";
//如果是"sousuokuang"，將它的背景色變為白色
}
});
下面是搜索框對應的html和css代碼：
<html>
<head>
<title>qq界面</title>
<script src="jquery-3.1.0.min.js"></script> //我從網上下載的jquery庫，由於上面的js代碼中用到了jquery語言，務必要把該庫加載進去
<script src="qq.js"></script>
<style>
#sousuokuang
{
border: 0px;
height: 28px;
width: 277px;
background: url("sousuo.png") no-repeat -2px -7px;
</style>
<head>
<body>
<input id="sousuokuang" />
</body>
</html>
當然，關於搜索框input的value值、以及由於背景圖片切換后文字顏色也應隨之更改等的細節部分，上文代碼中並未體現。為避免本文造成誤解，文章會隨時改進。