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