首頁 > 開發者 > 手機程式開發

父元素onmouseover觸發事件在父子項目間移動不停觸發的問題

來源：互聯網
上載者：User
創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

標籤：

今天寫了一個側邊欄動態展開收縮的效果 

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <style>        body{ font-size: 20px;font-weight: bold;color: white;line-height: 30px;text-align: center}        .container{height: 347px;position: absolute;right: 0;border: 1px solid black}        .container li{position: relative;list-style: decimal;height: 30px;width: 200px;            margin-bottom: 3px;border: 1px solid black;display: list-item;right: -165px}        .container li::before{content: "";display: block;position: relative;            height: 30px;width: 35px;background: red}        @keyframes bance {            0%{right: -165px}            100%{right:0 }        }        @keyframes bance1 {            0%{right:0 }            100%{right:-165px}        }    </style></head><body>    <div class="container">        <li>1</li>        <li>2</li>        <li>3</li>        <li>4</li>        <li>5</li>        <li>6</li>        <li>7</li>        <li>8</li>        <li>9</li>        <li>10</li>    </div>    <script>        window.onload=function(){            var lilist=document.querySelectorAll(‘li‘);            var container=document.querySelector(‘.container‘);            var T1=null,T2=null;            container.onmouseover=function(){                var n=0;                T1=setInterval(function(){                    lilist[n].style.animationName=‘bance‘;                    lilist[n].style.animationDuration=‘0.5s‘;                    lilist[n].style.animationFillMode="forwards";                    n++;                    if(n>9){clearInterval(T1)}                },50)            };        container.onmouseout=function(){                var i=0;                T2=setInterval(function(){                    lilist[i].style.animationName=‘bance1‘;                    lilist[i].style.animationDuration=‘0.5s‘;                    lilist[i].style.animationFillMode="forwards";                    i++;                    if(i>9){clearInterval(T2)}                },100)            }        }            </script></body></html>

執行過程中不斷報錯，仔細檢查邏輯沒有發現什麼問題，百度之發現可能是父元素onmouseover觸發事件在父子項目間移動不停觸發的問題，著手解決吧。讀完http://blog.sina.com.cn/s/blog_7488043d0101dnuz.html 這篇文章後知道瞭解決方法；

在onmouseover時先進行如下判斷，結果為true時再執行方法體：
if(!this.contains(event.fromElement)){MouseOverFunc()}
在onmouseout時先進行如下判斷，結果為true時再執行方法體：
if(!this.contains(event.toElement)){MouseOutFunc()}
下面來解釋一下上面兩行代碼的含義：
在IE中，所有的HTML元素都有一個contains方法，它的作用是判斷當前元素內部是否包含指定的元素。我們利用這個方法來判斷外層元素的事件是不是因為內部元素而被觸發，如果內部元素導致了不需要的事件被觸發，那我們就忽略這個事件。
event.fromElement指向觸發onmouseover和onmouseout事件時滑鼠離開的元素；event.toElement指向觸發onmouseover和onmouseout事件時滑鼠進入的元素。
那麼上面兩行代碼的含義就分別是：
○ 當觸發onmouseover事件時，判斷滑鼠離開的元素是否是當前元素的內部元素，如果是，忽略此事件；
○ 當觸發onmouseout事件時，判斷滑鼠進入的元素是否是當前元素的內部元素，如果是，忽略此事件；
這樣，內部元素就不會干擾外層元素的onmouseover和onmouseout事件了。

添加判斷後如下

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <style>        body{ font-size: 20px;font-weight: bold;color: white;line-height: 30px;text-align: center}        .container{height: 347px;position: absolute;right: 0;border: 1px solid black}        .container li{position: relative;list-style: decimal;height: 30px;width: 200px;            margin-bottom: 3px;border: 1px solid black;display: list-item;right: -165px}        .container li::before{content: "";display: block;position: relative;            height: 30px;width: 35px;background: red}        @keyframes bance {            0%{right: -165px}            100%{right:0 }        }        @keyframes bance1 {            0%{right:0 }            100%{right:-165px}        }    </style></head><body>    <div class="container">        <li>1</li>        <li>2</li>        <li>3</li>        <li>4</li>        <li>5</li>        <li>6</li>        <li>7</li>        <li>8</li>        <li>9</li>        <li>10</li>    </div>    <script>        window.onload=function(){            var lilist=document.querySelectorAll(‘li‘);            var container=document.querySelector(‘.container‘);            var T1=null,T2=null;            container.onmouseover=function(){                if(!this.contains(event.fromElement)){                    var n=0;                    T1=setInterval(function(){                        lilist[n].style.animationName=‘bance‘;                        lilist[n].style.animationDuration=‘0.5s‘;                        lilist[n].style.animationFillMode="forwards";                        n++;                        if(n>9){clearInterval(T1)}                    },50)                }            };            container.onmouseout=function(){                if(!this.contains(event.toElement)){                    var i=0;                    T2=setInterval(function(){                        lilist[i].style.animationName=‘bance1‘;                        lilist[i].style.animationDuration=‘0.5s‘;                        lilist[i].style.animationFillMode="forwards";                        i++;                        if(i>9){clearInterval(T2)}                    },100)                }            };        }    </script></body></html>

沒有問題。。

父元素onmouseover觸發事件在父子項目間移動不停觸發的問題

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

聯繫我們

該頁面正文內容均來源於網絡整理，並不代表阿里雲官方的觀點，該頁面所提到的產品和服務也與阿里云無關，如果該頁面內容對您造成了困擾，歡迎寫郵件給我們，收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容，歡迎發送郵件至： info-contact@alibabacloud.com 進行舉報並提供相關證據，工作人員會在 5 個工作天內聯絡您，一經查實，本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

  • Sales Support

    1 on 1 presale consultation

    Chat Contact Sales

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

    Open a Ticket

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

    Learn More