首页 > 代码库 > 判断鼠标点击在div外时，更改背景图片
判断鼠标点击在div外时，更改背景图片
学习起步时，本人试着在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="http://www.mamicode.com/jquery-3.1.0.min.js"></script> //我从网上下载的jquery库，由于上面的js代码中用到了jquery语言，务必要把该库加载进去
<script src="http://www.mamicode.com/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值、以及由于背景图片切换后文字颜色也应随之更改等的细节部分，上文代码中并未体现。为避免本文造成误解，文章会随时改进。
判断鼠标点击在div外时，更改背景图片