onmouseover事件触发的疑惑?

来源:2-1 JS速度动画

慕粉3775934

2016-10-13 10:46

http://www.imooc.com/video/2879/0

这节课4分14秒的代码,明明”分享“已经在父盒子div1之外了,将div1绑定onmouseover事件后,为什么鼠标移动到”分享“上仍然可以触发??而类似的下面的这段代码却无法触发alert指令??

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title></title>
  <style type="text/css">
  *{
   margin: 0;
   padding: 0;
  }
   .container #share{
    width: 20px;
    height: 50px;
    background: blue;
    position: absolute;
    left:200px;
    top:75px;
   }
   .container{
    width: 200px;
    height: 200px;
    background: red;
    position: relative;
    left: -200px;
    top: 0px;
   }
  </style>
  <script type="text/javascript">
   window.onload=function (){
    var container = document.getElementsByClassName('container')
    container.onmouseover= function (){
     startMove();     
    }
   }
   function startMove(){
    alert(123);
   }
  </script>
 </head>
 <body>
  <div class="container">
   <span id="share">
    分享
   </span>
  </div>
 </body>
</html>

 

写回答 关注

2回答

  • is小梅花
    2016-10-13 11:22:28
    已采纳

     class不是惟一的,所以getElementsByClassName得到的是一个类似数组的对象,不是div。

    在你原来的代码基础上可以这样 var container = document.getElementsByClassName('container')[0];

    个人觉得还是用id来获取比较好吧

    慕粉3775...

    非常感谢谢谢谢谢!明白了,还是用ID靠谱啊

    2016-10-13 19:38:44

    共 1 条回复 >

  • 梦之烟涯
    2016-10-13 11:41:00

    冒泡了吧

JS动画效果

通过本课程JS动画的学习,从简单动画开始,逐步深入各种动画框架封装

113925 学习 · 1443 问题

查看课程

相似问题