2010-07-23 2 views
1

код удара работает нормально на IE, но не работает на firefox, почему? Это какая-то проблема в моем коде? Как это исправить? благодаря!Откат javascriptBubble не работает на 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> 

демо здесь: http://jsbin.com/ivosa3

ответ

5

Попробуйте не устанавливать обработчик события в атрибуте, но вместо того, чтобы установить его в сценарии. Следующие действия выполняются как в IE, так и в 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> 
Смежные вопросы