2016-05-06 6 views
0

event.stopPropagation()Firefoxブラウザでは動作しませんが、Google ChromeやInternet ExplorerやOperaでうまくいきます。 btn_1をクリックすると、div1を表示していないというメッセージが表示されます。この問題には別の機能や解決策がありますか?感謝event.stopPropagation()firefox javacriptで動作していません

<!DOCTYPE html> 
 
<html> 
 
<meta charset="utf-8"> 
 
<meta name=viewport content="width=device-width, initial-scale=1"> 
 
<title>Hello!</title> 
 
<style type="text/css"> 
 
    <!-- body { 
 
    text-align: center; 
 
    } 
 
    #main { 
 
    position: absolute; 
 
    height: 400px; 
 
    width: 600px; 
 
    border: 1px solid black; 
 
    left: 400px; 
 
    } 
 
    #btn1 { 
 
    position: absolute; 
 
    height: 30px; 
 
    width: 200px; 
 
    border: 1px solid black; 
 
    left: 500px; 
 
    top: 420px; 
 
    } 
 
    #btn2 { 
 
    position: absolute; 
 
    height: 30px; 
 
    width: 200px; 
 
    border: 1px solid black; 
 
    left: 800px; 
 
    top: 420px; 
 
    } 
 
    #div1 { 
 
    height: 100px; 
 
    width: 100%; 
 
    background-color: #FF3399; 
 
    } 
 
    #div2 { 
 
    height: 100px; 
 
    width: 100%; 
 
    background-color: #99FF00; 
 
    position:relative; 
 
    } 
 
    #div3 { 
 
    height: 100px; 
 
    width: 100%; 
 
    background-color: #00CC99; 
 
    } 
 

 

 
    --> 
 
</style> 
 
<script> 
 
    function addElement2() { 
 

 
    var element = document.getElementById("main"); 
 
    while (element.firstChild) { 
 
     element.removeChild(element.firstChild); 
 
    } 
 

 
    var newContent = 0; 
 

 

 
    for (var i = 0; i <= 2; i++) { 
 

 

 
     newContent = newContent + 1; 
 

 
     var divname = "div" + newContent; 
 
     var divname2 = "div" + newContent; 
 
     var Content_text = "newContent" + newContent; 
 

 

 
     divname = document.createElement("div"); 
 
     document.getElementById("main").appendChild(divname); 
 
     Content_text = document.createTextNode(divname2); 
 

 
     divname.id = divname2.toString().trim(); 
 
     divname.appendChild(Content_text); 
 

 
     var btn = document.createElement("BUTTON") 
 
      document.getElementById(divname2.toString().trim()).appendChild(btn); 
 

 
       var btn_id= "btn_" + newContent; 
 
        btn.id =btn_id; 
 

 

 

 

 
    var Content_text2 = document.createTextNode("btn_" + newContent); 
 
    btn.appendChild(Content_text2); 
 
     btn.onclick = function(){delete_cooke1(this) ;} ; 
 
     divname.onclick = function(){go_to(this) ;} ; 
 

 
    } 
 
    } 
 

 
    function delete_cooke1(mmm){ 
 
      event.stopPropagation(); 
 
     var str = mmm.id.toString() ; 
 

 
       alert(str); 
 
       return; 
 
      } 
 

 

 
    function go_to(mmm){ 
 

 
     var str = mmm.id.toString() ; 
 

 
       alert(str); 
 
       return; 
 
      } 
 

 

 

 
</script> 
 
</head> 
 

 
<body> 
 
    <div id="main"></div> 
 
    <button id="btn1" onclick="addElement2()">1-Create 3 divs</button> 
 

 
</body> 
 

 
</html>

+1

event引数使用;' – guradio

答えて

1

あなたは明示的にコールバック関数へeventオブジェクトを渡す必要があります。たとえば:

document.querySelector("body").onclick = function(e){ 
    console.log(e); // the current event 
}; 

あなたはクロームグローバルon the window(すなわちwindow.eventまたは単にevent)として現在のイベントを公開しているという事実を利用しています。 Firefoxはこれをしません - そしてother browsersも同様に影響を受けます。

+0

ありがとうございましたが、前の例では、それを埋め込むことができますnathanallenと再送信を –

-1

のonclickから峠イベント:

btn.onclick = function(){delete_cooke1(this, event) ;} ; 

そして、あなたはfalseを返す `使用することができますstopPropagation()

function delete_cooke1(mmm, e){ 
    e.stopPropagation(); 
    e.preventDefault(); // Add this line also 
    var str = mmm.id.toString() ; 
    alert(str); 
    return; 
} 
+0

ありがとうございますが、問題はまだあります...メッセージ表示div1 not btn_1 Mozilla Firefox 45.0をご利用ください。ありがとうございました –

+0

i Mozilla Firefoxを使用する45.0 –

+1

delete_cookie1関数に1行追加しました。ただそれをチェック.. –

関連する問題