zoukankan      html  css  js  c++  java
  • js onmouseout的冒泡事件

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
    <title>无标题文档</title>
    <style type="text/css">
     ul{ list-style-type:none;}
     /*li{float:left;}*/
    </style>
    </head>

    <body>
    <!--<div onclick="viewType(this);" id="type_select_class" class="selectClass" style="position:relative;">
     <div class="title"><em>类型:</em><span id="current_type_name">全部</span></div>
        <ul class="class" id="menu_type_list" style="position:absolute;left:100px;top:50px;">
            <li onclick="setStyleType('0','全部',event);return false;">全部</li>
            <li onclick="setStyleType('001001','可爱',event);return false;">可爱</li>
            <li onclick="setStyleType('001002','幽默',event);return false;">幽默</li>
            <li onclick="setStyleType('001003','神秘',event);return false;">神秘</li>
            <li onclick="setStyleType('007006','东方神起',event);return false;">东方神起</li>
            <li onclick="setStyleType('007007','少女时代',event);return false;">少女时代</li>
        </ul>
    </div>
    -->

            <div style="300px;border:1px solid green;" id="test">
             <p onmouseout="setStyleType(event)">assssssssssssssssss</p>
                <p onmouseout="setStyleType(event)">asdfasdfasdfasdfasdf</p>
                <p onmouseout="setStyleType(event)">assssssssssssssssss</p>
                <p onmouseout="setStyleType(event)">asdfasdfasdfasdfasdf</p>
                <p onmouseout="setStyleType(event)">assssssssssssssssss</p>
                <p onmouseout="setStyleType(event)">asdfasdfasdfasdfasdf</p>
                <p onmouseout="setStyleType(event)">assssssssssssssssss</p>
                <p onmouseout="setStyleType(event)">asdfasdfasdfasdfasdf</p>
             
            </div>


    <script type="text/javascript">
     function setStyleType(event){
     //阻止冒泡调用parent
     var e = (event) ? event : window.event;
     if (window.event) {//IE
      e.cancelBubble=true;
     } else { //FF
      e.stopPropagation();
     }
    //alert(e.cancelBubble);
     //alert("33333");
    }
     function viewType(obj){
     obj.style.display = 'none';
     //alert("111");
    }

    var d1 = document.getElementById('test');
    //d1.onmouseover = mouseover_x ;
    d1.onmouseout = mouseout_x ;
    function mouseover_x ( ae ){
     var e = window.event || ae ;
     var s = e.fromElement || e.relatedTarget ;
     if( document.all ){
      if(  !(s == this || this.contains(s))  ){
      alert("IE: 你 in 了 !”");
      }
     }else{
      var res= this.compareDocumentPosition(s) ;
      if(  !(s == this || res == 20 || res == 0 )  ){
      alert("FF: 你 in 了 !");
      }
     }
    }

    function mouseout_x( ae ){
     var e = window.event || ae;
     var s = e.toElement || e.relatedTarget;
     //var temp = document.getElementById(‘but_temp’);
     if(document.all){
      if( !this.contains(s) ){
      alert('IE: 你 out 了');
       //if(this==getid('gamerboom_rss'))
       //showh('gamerboom_rss','h');
       //else
       //showh('share_box','h');
       //hide(‘gamerboom_rss’);
      }
     }else{
      var res= this.compareDocumentPosition(s) ;
      if( ! ( res == 20 || res == 0) ){
       alert('FF: 你 out 了');
       //if(this==getid('gamerboom_rss'))
       //showh('gamerboom_rss','h');
       //else
       //showh('share_box','h');
      }
     }
    }


    </script>
    </body>
    </html>

  • 相关阅读:
    QWrap简介之:EventW Event包装
    QWrap简介之:core_retouch 渲染原生类
    QWrap简介之:youa_retouch 项目个性
    QWrap简介之:Apps 应用 收获果实
    QWrap简介之:Wrap模式
    QWrap简介之:dom_retouch NodeW 勇士装甲
    Activity之间的数据传递
    OpenGL ES Tutorial for Android
    从零开始学习OpenGL ES之一 – 基本概念
    java自定义注解
  • 原文地址:https://www.cnblogs.com/myblog1314/p/2943168.html
Copyright © 2011-2022 走看看