jQuery 非氣泡事件 mouseenter/mouseleave 註冊

jQuery/jQuery Mobile 技術文件 》(持續新增中…)

新書《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 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 技術文件 》(持續新增中…)


沒有留言: