javascript cancelBubble doesn't work on firefox

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>
<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:

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>
<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./ivosa3

Share edited Nov 17, 2019 at 16:30 Cœur 38.8k25 gold badges206 silver badges278 bronze badges asked Jul 23, 2010 at 3:20 lanqy 3,0216 gold badges26 silver badges18 bronze badges

Add a ment |

1 Answer 1

Sorted by: Reset to default 5

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>

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

javascript cancelBubble doesn't work on firefox - Stack Overflow

1 Answer 1

与本文相关的文章

评论列表(0)