mouseover/mouseout和mouseenter/mouseleave的区别

mouseover/mouseout和mouseenter/mouseleave的区别

前不久自己写的一个demo中使用的mouseover/mouseout但是遇到一些问题,后来对比了下网上的和自己写的demo,找出了mouseover/mouseout和mouseenter/mouseleave两者的区别,不准确之处请大家指出。



<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Documenttitle>
    <style>
        #outside { width: 300px; height: 300px; border: 1px solid #666 }
        #outside #inner { width: 100px; height: 100px; background: #ccc; }
    style>
    <script src="https://code.jquery.com/jquery-3.1.1.min.js">script>
    <script type="text/javascript">
        $(document).ready(function() {
            $('#inner').mouseover(() => {
                console.log( 'mouseover被触发' );
            }).mouseout(() => {
                console.log( 'mouseout被触发' );
            });

            $('#inner').mouseenter(() => {
                console.log( 'mouseenter被触发' );
            }).mouseleave(() => {
                console.log( 'mouseleave被触发' );
            });
        });
    script>
head>
<body>
    <div id="outside">
        <div id="inner">div>
    div>
body>
html>

通过运行此例子中可以看出:
1.在一个嵌套的div中,鼠标移入到id为outside的div中会触发mouseover和mouseenter事件;
2.鼠标移入到id为inner的div中时,只会触发mouseover事件而不会触发mouseenter事件;
3.如果是从outside移入到inner中,会触发一次mouseout事件。

总结得出:若是单个元素,鼠标指针移入移出,mouseover/mouseout和mouseenter/mouseleave事件的触发效果一致;若是嵌套元素,mouseover/mouseout会往子级传递,并且鼠标指针从父级进入子级或者从子级进入父级时,都会触发离开的mouseout事件和进入的mouseover事件,而mouseenter/mouseleave只会在绑定的元素上生效。

你可能感兴趣的:(mouseover/mouseout和mouseenter/mouseleave的区别)