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