javascript cancelBubble은 파이어 폭스에서 작동하지 않습니다.

IE에서는 블로우 코드가 정상적으로 작동하지만 파이어 폭스에서는 작동하지 않습니다. 이유가 무엇입니까? 내 코드에 문제가 있습니까? 그것을 고치는 방법? 감사! 여기javascript cancelBubble은 파이어 폭스에서 작동하지 않습니다.

<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

출처

2010-07-23 lanqy

이 속성에 이벤트 핸들러를 설정하지 않는 시도 대신 스크립트에 설정합니다. 다음은 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>

출처

2010-07-23 04:07:07 Daniel

javascript cancelBubble은 파이어 폭스에서 작동하지 않습니다.

답변

관련 문제