當(dāng)前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

onmousemove和onmouseout事件的调用，和js使用双引号、单引号的时候应该注意的问题...

發(fā)布時(shí)間：2023/11/29 编程问答 31 豆豆

生活随笔收集整理的這篇文章主要介紹了 onmousemove和onmouseout事件的调用，和js使用双引号、单引号的时候应该注意的问题... 小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.

使用js的時(shí)候，統(tǒng)一使用雙引號(hào)，然后通過反斜杠進(jìn)行轉(zhuǎn)義

①如果同時(shí)使用單引號(hào)、和雙引號(hào)的情況下容易出現(xiàn)問題，導(dǎo)致標(biāo)簽中表示的事件不能調(diào)用，

②導(dǎo)致由于標(biāo)簽沒有封口而出現(xiàn)樣式布局錯(cuò)誤

1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 5 <title>JS教程:鼠標(biāo)懸停時(shí)顯示文字或顯示圖片</title> 6 <script type="text/javascript"> 7 function showPic(sUrl) { 8 alert(sUrl); 9 var x, y; 10 x = event.clientX; 11 y = event.clientY; 12 document.getElementById("Layer1").style.left = (x - 60).toString() + "px"; 13 document.getElementById("Layer1").style.top = (y - 100).toString() + "px"; 14 document.getElementById("Layer1").innerHTML = "<img src=\"" + sUrl + "\">"; 15 document.getElementById("Layer1").style.display = "block"; 16 } 17 function hiddenPic() { 18 document.getElementById("Layer1").innerHTML = ""; 19 document.getElementById("Layer1").style.display = "none"; 20 } 21 </script> 22 </head> 23 <body> 24 <div style="position: relative"> 25 <div id="Layer1" style="display: none; position: absolute; z-index: 1;"></div> 26 </div> 27 <img src="pic/QQ截圖20150721092858.jpg" οnmοuseοut="hiddenPic()" οnmοusemοve="showPic(this.src)" title="wowowowo" style="margin-top: 300px" /> 28 <div οnmοuseοut="hiddenPic()" οnmοusemοve="showPic('pic/QQ截圖20150721092858.jpg')" style="margin-top: 300px; width: 200px; height: 100px; background-color: blue" /> 29 </body> 30 </html>

對(duì)于上述代碼，如果ShowPic中的內(nèi)容，沒有使用單引號(hào)括起來的情況下，那么將會(huì)導(dǎo)致無法調(diào)用showPic，因?yàn)槿绻皇褂脝我?hào)的情況下就會(huì)導(dǎo)致將其解析為表達(dá)式

注意其中的onmousemove和onmouseout事件的使用

轉(zhuǎn)載于:https://www.cnblogs.com/itboy-2009/p/4663978.html

創(chuàng)作挑戰(zhàn)賽新人創(chuàng)作獎(jiǎng)勵(lì)來咯，堅(jiān)持創(chuàng)作打卡瓜分現(xiàn)金大獎(jiǎng)

總結(jié)

以上是生活随笔為你收集整理的onmousemove和onmouseout事件的调用，和js使用双引号、单引号的时候应该注意的问题...的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。