javascript cancelBubble doesn't work on firefox_问答_开发者

javascript cancelBubble doesn't work on firefox

开发者 https://www.devze.com 2023-01-08 06:52 出处：网络

the blow code work fine on IE, but doesn\'t work on firefox, why? It\'s some problem on my code? How to fix it?

相关专题：javascript

the blow code work fine on IE, but doesn't work on firefox, why? It's some problem on my code? How to fix it?

<html>
<head>
<style>
body{font-family:Arial;font-size:12px;font-weight:normal;line-height:28px;}
.product_tips{
width:500px;
background:#f0f0f0;
border:1px solid #ccc;
padding:8px;
margin-top:3px;
}
span{cursor:pointer;}
</style>
<script type="text/javascript">
    function get(id){ 
        return document.getElementById(id);
    }
    function showTip(e){
        if(get("product_tips").style.display == "none"){
        get("product_tips").style.display = "block";
    } else{
        get("product_tips").style.display = "none";
    }
    stopBubble(e)
}
function stopBubble(e) {
    if (e){
     e.stopPropagation();
     }
    else{
     window.event.cancelBubble = true;
    }
}
document.onclick = function(){
        get("product_tips").style.display = "none";
    }
</script>
</head&g开发者_开发技巧t;
<body>
<div class="relative_">
<label><input type="text" name="#" value="" id="product_name" maxlength="6" /></label>&nbsp;&nbsp;<span onclick="showTip();">help ?</span>
                <div id="product_tips" class="product_tips" style="display:none;" onclick="stopBubble();">
                    <div class="product_inbox">
                        <p>content content content content content content content content content content content content content content content content content content content content </p>
                    </div>
                </div>
                </div>
</body>
<html>

the demo here: http://jsbin.com/ivosa3

Try not setting the event handler in the attribute but instead set it in script. The following works in both IE and Firefox:

<html>
<head>
<style>
body{font-family:Arial;font-size:12px;font-weight:normal;line-height:28px;}
.product_tips{
width:500px;
background:#f0f0f0;
border:1px solid #ccc;
padding:8px;
margin-top:3px;
}
span{cursor:pointer;}
</style>
<script type="text/javascript">
  function get(id){
    return document.getElementById(id);
  }
  function showTip(e){
    if(get("product_tips").style.display == "none"){
    get("product_tips").style.display = "block";
  } else{
    get("product_tips").style.display = "none";
  }
    stopBubble(e)
}
function stopBubble(e) {
    if (e){
     e.stopPropagation();
   }
    else{

     window.event.cancelBubble = true;
  }
}
document.onclick = function(e){
    get("product_tips").style.display = "none";
  }
</script>
</head>
<body>
<div class="relative_">
<label><input type="text" name="#" value="" id="product_name" maxlength="6" /></label>&nbsp;&nbsp;<span id="help">help ?</span>
        <div id="product_tips" class="product_tips" style="display:none;">
          <div class="product_inbox">
            <p>content content content content content content content content content content content content content content content content content content content content </p>
          </div>
        </div>
        </div>
  <script type="text/javascript">
      get('help').onclick = showTip;
      get('product_tips').onclick = stopBubble;
    </script>
</body>
<html>