mouseout、mouseover和mouseleave、mouseenter区…

2018-06-24 00:41:41来源:未知 阅读 ()

新老客户大回馈,云服务器低至5折

今天在使用鼠标事件时,用错了mouseout,于是做个测试总结。

结论:

mouseenter:当鼠标移入某元素时触发。

mouseleave:当鼠标移出某元素时触发。

mouseover:当鼠标移入某元素时触发,移入和移出其子元素时也会触发。

mouseout:当鼠标移出某元素时触发,移入和移出其子元素时也会触发。

mousemove:鼠标在某元素上移动时触发,即使在其子元素上也会触发。

mouseout、mouseover和mouseleave、mouseenter最大的区别,在于子元素连带触发。

例子:

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
    .a{
      width: 500px;
      height: 500px;
      background: aliceblue;
    }
    .b{
      width: 200px;
      height: 200px;
      background: beige;
    }
    .c{
      width: 100px;
      height: 100px;
      background: violet;
    }
    </style>
</head>
<body>
    <div class="a">A
      <div class="b"
        onmouseenter="mouseenter()"
        onmouseleave="mouseleave()"
        onmouseout="mouseout()"
        onmouseover="mouseover()"
        onmousemove="mousemove()">B
        <div class="c">C
        </div>
      </div>
    </div>
    <script>
      function mouseenter(){
        console.log('mouseenter')
      }
      function mouseleave(){
        console.log('mouseleave')
      }
      function mouseout(){
        console.log('mouseout')
      }
      function mouseover(){
        console.log('mouseover')
      }
      function mousemove(){
        console.log('mousemove')
      }
    </script>
</body>
</html>

效果:

操作:

从A元素到C元素,再从C回到A,控制台输出如下:

演示地址:

http://htmlpreview.github.io/?https://github.com/codingforme/code-learn/blob/master/css-demo/mouse-event.html

标签:

版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有

上一篇:Element对象 常用属性与常用方法

下一篇:js解析base64