5.4 滑鼠相關事件
click 、dblclick 與事件冒泡狀況(Event Bubble Up)
click 事件的寫法,使用 .addEventListener()
:
var my_el = document.getElementById("my_el");
my_el.addEventListener("click", function(){
// 點擊後,要執行的程式...
});
範例(click):
範例(dblclick):
如果要停止事件冒泡狀況發生,在正確的位置執行以下程式:
e.stopPropagation();
範例:lightbox (燈箱)
其它滑鼠相關事件
mousedown、mouseup
mousedown:滑鼠按壓下去時觸發。(會發生冒泡狀況)
mouseup:滑鼠按壓下去放開時觸發。(會發生冒泡狀況)
範例(不用背,要會觀察):
mouseover、mouseout
mouseover:滑鼠移入時觸發。(會發生冒泡狀況)
mouseout:滑鼠移出時觸發。(會發生冒泡狀況)
範例:
mouseenter、mouseleave
mouseenter:滑鼠移入時觸發。(不會發生冒泡狀況)
mouseleave:滑鼠移出時觸發。(不會發生冒泡狀況)
範例:
mousemove
說明:滑鼠游標在元素上移動時觸發。(會發生事件冒泡狀況)
範例:
練習:圖片跟著滑鼠移動
針對 document 綁定 mousemove 事件。
e.pageX:滑鼠距離頁面最左側的距離。
e.pageY:滑鼠距離頁面最上方的距離。
window.scrollY:垂直方向滑動了多少距離。
提供 html:
<img src="https://alldata.sgp1.digitaloceanspaces.com/images/icon_animate.gif" id="img">
<div style="border: 1px solid red;height: 1000px;"></div>
參考作法:
示意圖:

Last updated