event.x,event.clientX,event.offsetX區(qū)別
更新時(shí)間：2006年11月09日 00:00:00 作者：
event.x,event.clientX,event.offsetX區(qū)別,需要的朋友可以參考下。
x:設(shè)置或者是得到鼠標(biāo)相對(duì)于目標(biāo)事件的父元素的外邊界在x坐標(biāo)上的位置。
clientX:相對(duì)于客戶區(qū)域的x坐標(biāo)位置，不包括滾動(dòng)條，就是正文區(qū)域。
offsetx：設(shè)置或者是得到鼠標(biāo)相對(duì)于目標(biāo)事件的父元素的內(nèi)邊界在x坐標(biāo)上的位置。
screenX:相對(duì)于用戶屏幕。
測試代碼一:
[code]
<html>
<head>
</head>
<script>
function reload(){
window.location.reload("http://www.fzitv.net");
}
</script>
<body>
<table>
<TR><TD><input type="button" name="button1" value="button1" onclick="reload();"></TD><TD></TD></TR>
<TR><TD><input type="button" name="button2" value="button2" onclick="reload();"></TD><TD></TD></TR>
</table>
<input type="button" name="update" value="刷新" onclick="reload();">
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<input type="button" name="button" value="button" onclick="reload();">
</body>
</html>
<script>
function window.onbeforeunload()
{
alert('event.clientX='+event.clientX);//如果是鼠標(biāo)點(diǎn)擊“刷新”按鈕，則跟鼠標(biāo)點(diǎn)擊時(shí)的位置有關(guān)
alert('event.offsetX='+event.offsetX);
alert('document.body.clientWidth='+document.body.clientWidth);
alert('event.clientY='+event.clientY);
alert('event.offsetY='+event.offsetY);
alert('event.altKey='+event.altKey);
if(event.clientX>document.body.clientWidth&&event.clientY<0||event.altKey)
{
window.event.returnValue="確定要退出本頁嗎?";
}else
{
alert("你在刷新");
}
}
</script>
[/html]
演示代碼二:
[Ctrl+A 全選 注:引入外部Js需再刷新一下頁面才能執(zhí)行]
clientX:相對(duì)于客戶區(qū)域的x坐標(biāo)位置，不包括滾動(dòng)條，就是正文區(qū)域。
offsetx：設(shè)置或者是得到鼠標(biāo)相對(duì)于目標(biāo)事件的父元素的內(nèi)邊界在x坐標(biāo)上的位置。
screenX:相對(duì)于用戶屏幕。
測試代碼一:
[code]
<html>
<head>
</head>
<script>
function reload(){
window.location.reload("http://www.fzitv.net");
}
</script>
<body>
<table>
<TR><TD><input type="button" name="button1" value="button1" onclick="reload();"></TD><TD></TD></TR>
<TR><TD><input type="button" name="button2" value="button2" onclick="reload();"></TD><TD></TD></TR>
</table>
<input type="button" name="update" value="刷新" onclick="reload();">
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<input type="button" name="button" value="button" onclick="reload();">
</body>
</html>
<script>
function window.onbeforeunload()
{
alert('event.clientX='+event.clientX);//如果是鼠標(biāo)點(diǎn)擊“刷新”按鈕，則跟鼠標(biāo)點(diǎn)擊時(shí)的位置有關(guān)
alert('event.offsetX='+event.offsetX);
alert('document.body.clientWidth='+document.body.clientWidth);
alert('event.clientY='+event.clientY);
alert('event.offsetY='+event.offsetY);
alert('event.altKey='+event.altKey);
if(event.clientX>document.body.clientWidth&&event.clientY<0||event.altKey)
{
window.event.returnValue="確定要退出本頁嗎?";
}else
{
alert("你在刷新");
}
}
</script>
[/html]
演示代碼二:
[Ctrl+A 全選 注:引入外部Js需再刷新一下頁面才能執(zhí)行]
您可能感興趣的文章:
相關(guān)文章
JavaScript具有一個(gè)非常有用的方法replace()，可以用它利用備選字符集途歡指定的字符，下面有個(gè)不錯(cuò)的示例，大家可以嘗試操作下2013-10-10
詳解ES6新增字符串?dāng)U張方法includes()、startsWith()、endsWith()
這篇文章主要介紹了詳解ES6新增字符串?dāng)U張方法includes()、startsWith()、endsWith()，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-05-05
onkeydown事件解決按回車鍵直接提交數(shù)據(jù)的需求
登陸頁面需要撲捉用戶按下回車自動(dòng)提交的需求，于是相到在body里添加onkeydown事件跳javascript在提交表單，具體看下實(shí)現(xiàn)代碼，希望對(duì)你有所幫助2013-04-04
uniapp實(shí)現(xiàn)h5、app與微信小程序三端pdf文件下載和預(yù)覽功能
作為使用uni-app的小白來說,嘗試了好幾種方法,終于得到了我想要的效果,下面這篇文章主要給大家介紹了關(guān)于uniapp實(shí)現(xiàn)h5、app與微信小程序三端pdf文件下載和預(yù)覽功能的相關(guān)資料,需要的朋友可以參考下2022-12-12
這篇文章主要為大家詳細(xì)介紹了原生JS實(shí)現(xiàn)留言板，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-03-03
這篇文章主要為大家詳細(xì)介紹了小程序?qū)崿F(xiàn)滑動(dòng)塊，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-04-04
這篇文章主要介紹了javascript動(dòng)畫算法,實(shí)例分析了javascript實(shí)現(xiàn)動(dòng)畫效果的實(shí)現(xiàn)及使用技巧,需要的朋友可以參考下2015-07-07
lhgcalendar時(shí)間插件限制只能選擇三個(gè)月的實(shí)現(xiàn)方法
下面小編就為大家?guī)硪黄猯hgcalendar時(shí)間插件限制只能選擇三個(gè)月的實(shí)現(xiàn)方法。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-07-07
簡單談?wù)凜ommonsChunkPlugin抽取公共模塊
下面小編就為大家分享一篇簡單談?wù)凜ommonsChunkPlugin抽取公共模塊，具有很的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2017-12-12
javascript實(shí)現(xiàn)修改微信分享的標(biāo)題內(nèi)容等
這篇文章主要介紹了javascript實(shí)現(xiàn)修改微信分享的標(biāo)題內(nèi)容等,需要的朋友可以參考下2014-12-12