判断鼠标点击在div外时，更改背景图片
? ? ? ?學(xué)習(xí)起步時(shí)，本人試著在web端界面上仿照qq客戶端主菜單，做出了一個(gè)界面。
? ? ? ?當(dāng)做到qq主菜單的搜索框時(shí)，發(fā)現(xiàn)點(diǎn)擊搜索框后，里面的背景圖片會(huì)消失，如下面2張圖所示：
? ?? ??
? ? ? ? ? ? ? ? ? ? ? 點(diǎn)擊前 ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ???點(diǎn)擊后
?
? ? ? 盡管類似這種判斷鼠標(biāo)是否點(diǎn)擊在div外，以更改背景圖片的應(yīng)用在web開發(fā)中并不多見，但是我們還是需要明白，應(yīng)如何實(shí)現(xiàn)對(duì)鼠標(biāo)是否點(diǎn)擊在div外的判斷。
? ? ? 在這里，我采用了如下代碼：
$(document).click(function(e) ? ? ? ? ? ? //e代表事件，在firefox中只能在事件現(xiàn)場使用window.event
{
? ? ? var target=$(e.target); ? ? ? ? ? ? ? ? ? ? //把觸發(fā)這次點(diǎn)擊事件對(duì)象拿出來，在本例中，即id為“sousuokuang”的div
? ? ? if(!target.is('#sousuokuang')) ? ? ? ? ? //判斷出發(fā)點(diǎn)擊事件的對(duì)象名稱是否為"sousuokuang"
{
? ? ? //alert("hello!"); ? ?調(diào)試時(shí)用到的，可以忽略
? ? ? document.getElementById("sousuokuang").style.background= "url('sousuo.png') no-repeat -2px -7px";
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? //如果不是"sousuokuang"，保持它的背景圖片不變
}
else
{
? ? ? document.getElementById("sousuokuang").style.background="white";
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?//如果是"sousuokuang"，將它的背景色變?yōu)榘咨?br /> }
});
下面是搜索框?qū)?yīng)的html和css代碼：
? ? <html>??
? ? ? ? ? ?<head>
? ? ? ? ? ?<title>qq界面</title>
? ? ? ? ? ?<script src="jquery-3.1.0.min.js"></script> ?//我從網(wǎng)上下載的jquery庫，由于上面的js代碼中用到了jquery語言，務(wù)必要把該庫加載進(jìn)去
? ? ? ? ? ?<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>
?
? ? ? ? 當(dāng)然，關(guān)于搜索框input的value值、以及由于背景圖片切換后文字顏色也應(yīng)隨之更改等的細(xì)節(jié)部分，上文代碼中并未體現(xiàn)。為避免本文造成誤解，文章會(huì)隨時(shí)改進(jìn)。
轉(zhuǎn)載于:https://www.cnblogs.com/May-study/p/5828511.html
總結(jié)
以上是生活随笔為你收集整理的判断鼠标点击在div外时，更改背景图片的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： php 迭代器使用
- 下一篇： Python 网络爬虫 001 (科普)