方法一頁 | 二頁 | 三頁 | 四頁 | 五頁 | 六頁 | 七頁
操控器一頁 | 二頁 | 三頁 | 四頁 | 五頁 | 六頁 | 七頁 | 成員表
用戶在視窗點擊滑鼠左鍵或右鍵，會啟動此事件操控器。在 Firefox, Safari, Chrome 可以用 window.onmousedown；在 IE 必須使用 document.body.onmousedown。可加在 HTML 元素上使用，請參考 onmousedown。
可由 event 物件檢查是哪一鍵被點擊及其座標。event.button 的值，Firefox, Safari, Chrome 的定義：
- 0：左鍵。
- 1：中鍵，多已改為滾輪。
- 2：右鍵。
event.button 的值，IE 的定義：
- 0：沒有按。
- 1：左鍵。
- 2：右鍵。
- 3：兩鍵同時按。
- 4：中鍵。
event.screenX, event.screenY 放滑鼠點擊座標，以螢幕之左上角為原點 (0,0)。
event.clientX, event.clientY 放滑鼠點擊座標，以瀏覽器的展現區之左上角為原點。可以將瀏覽器變小，就可以看出與上面的差異。
- 程式用法：
<script type='text/javascript'>
function onmousedownHd(e)
{
var e = e || window.event;
onmousedownSet(null);
alert('滑鼠 '+ e.button +' / '+
e.clientX +','+ e.clientY +' / '+
e.screenX +','+ e.screenY);
}
function onmousedownSet(hd)
{
if( window.outerWidth == undefined )
document.body.onmousedown=hd;
else
onmousedown=hd;
}
</script>
<a href='javascript:onmousedownSet(onmousedownHd)'>設定操控器</a> - 執行結果：
用戶在視窗移動滑鼠，會啟動此事件操控器。在 Firefox, Safari, Chrome 可以用 window.onmousemove；在 IE 必須使用 document.body.onmousemove。可加在 HTML 元素上使用，請參考 onmousemove。
- 程式用法：
<script type='text/javascript'>
function onmousemoveHd(e)
{
var e = e || window.event;
var o=document.getElementById('mvtext');
o.value=e.button +' / '+
e.clientX +','+ e.clientY +' / '+
e.screenX +','+ e.screenY;
}
function onmousemoveSet(hd)
{
if( window.outerWidth == undefined )
document.body.onmousemove=hd;
else
onmousemove=hd;
}
</script>
<a href='javascript:onmousemoveSet(onmousemoveHd)'>設定操控器</a> //
<a href='javascript:onmousemoveSet(null)'>清除操控器</a><br />
<input id='mvtext' size=32> - 執行結果：
移動滑鼠發生移出事件，會啟動此操控器。在 Firefox, Safari, Chrome 可以用 window.onmouseout；在 IE 必須使用 document.body.onmouseout。可加在 HTML 元素上使用，請參考 onmouseout。如果一個元素宣告了 onmouseout，則所謂的移出，並不是純指外在大範圍的移出此元素；如果此元素內有子元素，移入子元素的範圍，也會產生移出事件。
- 程式用法：
<script type='text/javascript'>
function onmouseoutHd(e)
{
var e = e || window.event;
var o=document.getElementById('outtext');
o.value=e.button +' / '+
e.clientX +','+ e.clientY +' / '+
e.screenX +','+ e.screenY;
}
function onmouseoutSet(hd)
{
if( window.outerWidth == undefined )
document.body.onmouseout=hd;
else
window.onmouseout=hd;
}
</script>
<a href='javascript:onmouseoutSet(onmouseoutHd)'>設定操控器</a> //
<a href='javascript:onmouseoutSet(null)'>清除操控器</a><br />
<input id='outtext' size=32> - 執行結果：
滑鼠移入視窗，會啟動此操控器。在 Firefox, Safari, Chrome 可以用 window.onmouseover；在 IE 必須使用 document.body.onmouseover。可加在 HTML 元素上使用，請參考 onmouseover。在父元素或子元素之間進出，都會產生移入移出事件。
- 程式用法：
<script type='text/javascript'>
function onmouseoverHd(e)
{
var e = e || window.event;
var o=document.getElementById('ovtext');
o.value=e.button +' / '+
e.clientX +','+ e.clientY +' / '+
e.screenX +','+ e.screenY;
}
function onmouseoverSet(hd)
{
if( window.outerWidth == undefined )
document.body.onmouseover=hd;
else
window.onmouseover=hd;
}
</script>
<a href='javascript:onmouseoverSet(onmouseoverHd)'>設定操控器</a> //
<a href='javascript:onmouseoverSet(null)'>清除操控器</a><br />
<input id='ovtext' size=32> - 執行結果：
用戶在視窗按滑鼠左鍵或右鍵，放開時，會啟動此事件操控器。在 Firefox, Safari, Chrome 可以用 window.onmouseup；在 IE 必須使用 document.body.onmouseup。可加在 HTML 元素上使用，請參考 onmouseup。
- 程式用法：
<script type='text/javascript'>
function onmouseupHd(e)
{
var e = e || window.event;
onmouseupSet(null);
alert('滑鼠 '+ e.button +' / '+
e.clientX +','+ e.clientY +' / '+
e.screenX +','+ e.screenY);
}
function onmouseupSet(hd)
{
if( window.outerWidth == undefined )
document.body.onmouseup=hd;
else
window.onmouseup=hd;
}
</script>
<a href='javascript:onmouseupSet(onmouseupHd)'>設定操控器</a> - 執行結果：
