event.stopPropagation() not working in firefox javascript

stoppropagation not working
onclick stoppropagation
event stopimmediatepropagation not working in firefox
event propagation
checkbox prevent default
preventdefault not working javascript
event stoppropagation vs preventdefault
stoppropagation not working react

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>

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 (i.e. window.event or just event). Firefox does not do this -- and other browsers are affected as well.

Event.stopPropagation() - Web APIs, It does not, however, prevent any default behaviors from occurring; The stopPropagation() method of the Event interface prevents further� The stopPropagation() method of the Event interface prevents further propagation of the current event in the capturing and bubbling phases. It does not, however, prevent any default behaviors from occurring; for instance, clicks on links are still processed. If you want to stop those behaviors, see the preventDefault() method.

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.

event.preventDefault is not working on the latest , preventDefault" Actual results: After installing the latest version of Firefox, it is not working any more. I even tried all the combinations: event.preventDefault event. Hi, The function can only accept ‘id’ for the argument. but I have to use ‘event’ inside the function. It works on chrome, but not in firefox. Because we have to pass the ‘event’ variable so any functions related to ‘event’ will work. But how do I pass that ‘event’ into the function? Thanks.

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;
}

event.preventDefault not working in Firefox � Issue #17 , Hi, I have event.preventDefault on links that open a new tab so the user has to fill in a form before they can see the content. It works fine in� When an event can bubble up, you can stop its propagation with the cancelBubble property and the stopPropagation method. Use the stopPropagation method in Firefox, Opera, Google Chrome and Safari, because the cancelBubble property is deprecated in those browsers. Internet Explorer also supports the stopPropagation method from version 9.

event.stopPropagation() not working in firefox javascript , 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� The stopImmediatePropagation() method of the Event interface prevents other listeners of the same event from being called.. If several listeners are attached to the same element for the same event type, they are called in the order in which they were added.

stopPropagation() not working in Firefox Solutions, Find answers to stopPropagation() not working in Firefox from the expert community at Experts Exchange. JavaScript. 14 Comments. 2 Solutions. 5,009 Views if (!e) var e = window.event; e.cancelBubble = true; if (e.stopPropagation ) e. Calling preventDefault () during any stage of event flow cancels the event, meaning that any default action normally taken by the implementation as a result of the event will not occur. You can use Event.cancelable to check if the event is cancelable. Calling preventDefault () for a non-cancelable event has no effect.

event.StopPropagation() is not working in Firefox - Tree, Hi, [image] The function can only accept 'id' for the argument. but I have to use ' event' inside the function. It works on chrome, but not in firefox. Since the .live() method handles events once they have propagated to the top of the document, it is not possible to stop propagation of live events. Similarly, events handled by .delegate() will propagate to the elements to which they are delegated; event handlers bound on any elements below it in the DOM tree will already have been executed by the time the delegated event handler is called.

Comments
  • you can use return false;
  • Thank you nathanallen Can you embed it in the previous example and resend with thanks
  • Thank you, but the problem is still ... a message show div1 not btn_1 Use Mozilla Firefox 45.0 , with many thanks and appreciation
  • i Use Mozilla Firefox 45.0
  • Unfortunately Same result