jQuery/jQuery Mobile 技術文件 》(持續新增中…)
新書《HTML5從零開始》目前正全力開發中,其中有一章會討論 jQuery 的各項入門議題,包含事件的註冊,此篇來看看一組非氣泡事件 mouseenter/mouseleave,這一組事件最早由 IE 瀏覽器所支援,透過 jQuery 註冊則能夠讓所有瀏覽器支援這兩個事件。
mouseenter 事件於滑鼠游標進入註冊此元素區域時被觸發,效果同 mouseover ,而 mouseleave 則於滑鼠游標離開註冊此事件元素區域時被觸發,效果同 mouseout ,mouseenter/mouseleave 與 mouseover/mouseout 此兩組事件的差異,在於前者並非氣泡事件,因此可以避免氣泡現象所導致的困擾,精確的捕捉滑鼠進入或離開註冊元素的時機。
考慮以下的圖示,其中的黑色方塊是一個 <div> 標籤,而內部灰色方塊則是另外一個巢狀式 <div> 標籤。
新書《HTML5從零開始》目前正全力開發中,其中有一章會討論 jQuery 的各項入門議題,包含事件的註冊,此篇來看看一組非氣泡事件 mouseenter/mouseleave,這一組事件最早由 IE 瀏覽器所支援,透過 jQuery 註冊則能夠讓所有瀏覽器支援這兩個事件。
mouseenter 事件於滑鼠游標進入註冊此元素區域時被觸發,效果同 mouseover ,而 mouseleave 則於滑鼠游標離開註冊此事件元素區域時被觸發,效果同 mouseout ,mouseenter/mouseleave 與 mouseover/mouseout 此兩組事件的差異,在於前者並非氣泡事件,因此可以避免氣泡現象所導致的困擾,精確的捕捉滑鼠進入或離開註冊元素的時機。
考慮以下的圖示,其中的黑色方塊是一個 <div> 標籤,而內部灰色方塊則是另外一個巢狀式 <div> 標籤。

當我們在構成外部黑色方塊的 <div> 標籤中註冊 mouseover/mouseout 這一組事件,由於氣泡現象,滑鼠進入或是離開構成中間灰色區域的巢狀 <div> 元素同樣會觸發此註冊事件,這導致我們無法精準分辨事件的觸發來源。
要避免上述問題,只需註冊 mouseenter/mouseleave 這一組事件即可。考慮以下的範例圖示:
畫面上包含兩組圖片,分別嵌入左右兩個 <div> 形成的黑色方塊中,當滑鼠游標進入不同的區域時,畫面最上方會顯示目前觸發的事件,以及觸發此事件的元素名稱, HTML 標籤內容如下:
請特別注意其中的 <div> 標籤與 <img> 標籤的 id ,以下列舉註冊事件所需的程式碼:
其中針對第一組 <div> 標籤註冊 mouseover 事件,而第二組 <div> 標籤註冊的則是 mouseenter 事件。在左邊的區塊中,由於 mouseover 是氣泡事件,因此如果滑鼠游標進入其中的圖片區域,同樣會觸發此事件,右邊區塊則只有進入黑色區域會觸發 mouseenter 事件。
jQuery/jQuery Mobile 技術文件 》(持續新增中…)
要避免上述問題,只需註冊 mouseenter/mouseleave 這一組事件即可。考慮以下的範例圖示:

畫面上包含兩組圖片,分別嵌入左右兩個 <div> 形成的黑色方塊中,當滑鼠游標進入不同的區域時,畫面最上方會顯示目前觸發的事件,以及觸發此事件的元素名稱, HTML 標籤內容如下:
<div id="msg" style="…"></div>
<div>
<div id="eleft" style="width: 380px; height: 320px; …">
<img id="imga" src="images/IMGP0811_l.jpg"
style="height: 180px; margin: 60px" />
</div>
<div id="eright" style=" width: 380px; height: 320px; …">
<img id="imgb" src="images/IMGP0818_l.jpg"
style="height: 180px; margin: 60px" />
</div>
</div>
請特別注意其中的 <div> 標籤與 <img> 標籤的 id ,以下列舉註冊事件所需的程式碼:
<script>
$(document).ready(
function () {
$('#eleft').mouseover(
function (e) {
$('#msg').html('MOUSEOVER' + '/' +
$(e.target).attr('id')) ;
}
);
$('#eright').mouseenter(
function (e) {
$('#msg').html('MOUSEENTER' + '/' +
$(e.target).attr('id')) ;
}
);
});
</script>
其中針對第一組 <div> 標籤註冊 mouseover 事件,而第二組 <div> 標籤註冊的則是 mouseenter 事件。在左邊的區塊中,由於 mouseover 是氣泡事件,因此如果滑鼠游標進入其中的圖片區域,同樣會觸發此事件,右邊區塊則只有進入黑色區域會觸發 mouseenter 事件。
jQuery/jQuery Mobile 技術文件 》(持續新增中…)
沒有留言:
張貼留言