mouseover(鼠標覆蓋)與 mouseenter(鼠標進入) mouseout和mouseleave的區別以及阻止冒泡的方法

今天在寫js相冊代碼時注意到

mouseover是對整個組件起效果的，子元素會發生冒泡，比如這樣無論我是移入時到li標簽還是子元素img都

外邊框都會是紅色

 

 

 而mouseenter只對監聽的那個標簽起效果，子元素沒有發生冒泡，像這樣我移動到img時邊框就沒了

 

 

 mouseout 事件與mouseover差不多 

不論鼠標指針離開被選元素還是任何子元素，mouseout 事件都會觸發

 mouseleave類似於mouseenter

只有在鼠標指針離開被選元素時，才會觸發 mouseleave 事件。

 

既然都寫到了冒泡

那就寫寫阻止冒泡的方法

<form id="form1">　　　　
  <div id="divOne" onclick="alert('1！');">　　　　　　
    <div id="divTwo" onclick="alert('2！')">
      <a id="hr_three" href="http://www.baidu.com"  onclick="alert('3！')">
        點擊
    </a>　　　　　　
    </div>　　　　
  </div>
</form>

用這段代碼會彈出3！ 2！ 1！然后跳轉到百度，只點擊了a標簽卻執行3個alert,

從最里層冒泡到了最外層

那么如何阻止冒泡嘞？

1.event.stopPropagation(); 

1.event.stopPropagation(); 

 <script type="text/javascript">
        $(function() {
            $("#hr_three").click(function(event) {
                event.stopPropagation();
            });
        });
<script>

點擊后就只會出現3，然后再跳轉到百度沒有阻止掉默認事件

2.return false;

<script type="text/javascript">
$(function() {
　　$("#hr_three").click(function(event) {
　　　　return false;
　　});
});
<script> 

會彈出3但別的事件被完全阻止掉

3.event.preventDefault(); 

<script type="text/javascript">
$(function() {
　　$("#hr_three").click(function(event) {
　　　　event.preventDefault();
　　});
});
<script> 

3，2，1會彈出但默認的事件沒了就像它的名字preventDefault()一樣