event.stopPropagation() not working in firefox javascript
Question
event.stopPropagation() Does not work as it should be in the Firefox browser, but in Google Chrome or Internet Explorer or opera it is works well, the problem in Firefox browser when Clicking on btn_1 should show message btn_1 not show div1 .Is there another function or a solution to this problem? Gratefully
<!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>
3 answers
solution1
1 2016-05-06 03:05:35
You will need to explicitly pass the event object into your callback function. For example:
document.querySelector("body").onclick = function(e){
console.log(e); // the current event
};
You are taking advantage of the fact that Chrome exposes the current event as a global on the window (ie window.event or just event ). Firefox does not do this -- and other browsers are affected as well.
solution2
1 2020-01-20 20:58:12
Calling event.preventDefault() worked in my case.
I have a react app and I was calling event.stopPropogation() inside the onclick handler of a material-ui checkbox like so:
<StyledCheckBox
icon={<CircleUnchecked />}
checkedIcon={<CircleChecked />}
checked={shipmentEditIds.includes(id)}
onClick={event => {
event.stopPropagation();
setShipmentEditIds({ id });
}}
/>
For some reason, only in firefox browser, this wasn't stopping the event from propagating. Once I added event.preventDefault() to the onClick handler it fixed the problem.
I know this doesn't provide an answer as to why stopPropagation() isn't working in Firebox browser but just sharing what worked for me.
solution3
-1 2016-05-06 03:16:55
Pass event from onclick:
btn.onclick = function(){delete_cooke1(this, event) ;} ;
And use event argument with stopPropagation()
function delete_cooke1(mmm, e){
e.stopPropagation();
e.preventDefault(); // Add this line also
var str = mmm.id.toString() ;
alert(str);
return;
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.