jquery如何阻止子元素相应mouseout事件【js】_周末简设

轻设计 / 轻生活 / 轻日记 / 轻梦想 === zhoumojianshe ===

jquery如何阻止子元素相应mouseout事件【js】

TAGS: js


  <!DOCTYPE html>
  <html>
  
  <head>
      <meta charset=" utf-8">
      <meta name="author" content="http://www.youtiy.com/" />
      <title>周末简设</title>
      <style type="text/css">
          #father
          {
            width:100px;
            height:100px;
            background:red;
          }
          #inner
          {
            width:50px;
            height:50px;
            background:green;
          }
      </style>
      <script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script>
      <script type="text/javascript">
          $(document).ready(function(){
            $("#father").mouseout(function(e){
              evt = window.event||e;
              var obj=evt.toElement||evt.relatedTarget;
              var pa=this;
              if(pa.contains(obj)) return false;
              $(this).hide();
            });  
          })
      </script>
  </head>
  
  <body>
      <div id="father">
          <div id="inner"></div>
      </div>
  </body>
  
  </html>

以上代码实现了我们的要求，当鼠标指针移入子div的时候，不会触发事件，但是当鼠标移出父div的时候会触发事件，下面接扫一下实现此效果的过程。
一.实现原理:
原理非常的简单，就是判断当鼠标指针移动的时候，判断与事件的目标节点相关的节点是否是子元素，如果是子元素，则不触发事件，如果不是子元素则触发事件。

周末

2021-09-24 12:20:29

标签云

网页设计精致慢生活感悟思语我的旧年华

加偶微信

今日推荐：