event.stopPropagation() 在 Firefox javascript 中不起作用

Question

event.stopPropagation() 在 Firefox 瀏覽器中不起作用，但在 Google Chrome 或 Internet Explorer 或opera 中運行良好，Firefox 瀏覽器中單擊 btn_1 時的問題應顯示消息 btn_1 not show div1 。是否存在另一個功能或解決此問題的方法？ 感激地

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

Answer 1

您需要將event對象顯式傳遞到回調函數中。 例如：

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

您正在利用 Chrome 將當前事件公開為窗口上的全局事件（即window.event或僅event ）這一事實。 Firefox 不會這樣做——其他瀏覽器也會受到影響。

Answer 2

調用event.preventDefault()在我的情況下有效。

我有一個 react 應用程序，我在 material-ui 復選框的 onclick 處理程序中調用 event.stopPropogation() ，如下所示：

<StyledCheckBox
  icon={<CircleUnchecked />}
  checkedIcon={<CircleChecked />}
  checked={shipmentEditIds.includes(id)}
  onClick={event => {
    event.stopPropagation();
    setShipmentEditIds({ id });
  }}
/>

出於某種原因，僅在 Firefox 瀏覽器中，這並沒有阻止事件的傳播。 一旦我將event.preventDefault()添加到 onClick 處理程序，它就解決了這個問題。

我知道這並沒有提供為什么stopPropagation()在 Firebox 瀏覽器中不起作用的答案，而只是分享對我有用的東西。

Answer 3

從 onclick 傳遞事件：

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

並在stopPropagation()使用event參數

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

event.stopPropagation() 在 Firefox javascript 中不起作用

問題描述

3 個解決方案

解決方案1
1 2016-05-06 03:05:35

解決方案2
1 2020-01-20 20:58:12

解決方案3
-1 2016-05-06 03:16:55

event.stopPropagation() 在 Firefox javascript 中不起作用

問題描述

3 個解決方案

解決方案1 1 2016-05-06 03:05:35

解決方案2 1 2020-01-20 20:58:12

解決方案3 -1 2016-05-06 03:16:55

解決方案1
1 2016-05-06 03:05:35

解決方案2
1 2020-01-20 20:58:12

解決方案3
-1 2016-05-06 03:16:55