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 技術文件　》（持續新增中…）

繼續閱讀…