javascript cancelBubble ne fonctionne pas sur firefox

le code de coup fonctionne très bien sur IE, mais ne fonctionne pas sur firefox, pourquoi? C'est un problème sur mon code? Comment le réparer? Merci!javascript cancelBubble ne fonctionne pas sur 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(){ 
     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>

la démo ici: http://jsbin.com/ivosa3

Source

2010-07-23 lanqy

Essayez de ne pas régler le gestionnaire d'événements dans l'attribut, mais employer plutôt dans un script. Les travaux suivants dans IE et 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>

Source

2010-07-23 04:07:07 Daniel

javascript cancelBubble ne fonctionne pas sur firefox

Répondre

Questions connexes