consequences of stopPropagation

Question

consequences of stopPropagation

Navigation

#1 by (2 votes)

3

I have a website, mostly made with Bootstrap and certain not so powerful PCs (I saw a Core 2 Duo with 4gb of RAM) as an example, my web experiences some "latency" when clicking on form elements like inputs, buttons, selects and the css animations of these are done in slow motion.

Nothing ago I discovered by accident that something like this:

$("div").on("click", "input, select, button", function(e){
    e.stopPropagation();
});

Towards wonders with the experience of these teams on the page, making these actions and their animations much more fluid (as it should be).

The question in question then is, as I have only used

e.stopPropagation();

to make the clicks of some elements do not run more than once in the past, I really have no idea why this happens and except for some elements that do not work normally and I will have to adjust, with that code the web it becomes much more enjoyable for less powerful PCs.

This can bring some problem that I'm not seeing?

javascript jquery

asked by gauchoscript 16.02.2017 в 04:25

source

1 answer

Delete with inner join NSLayoutConstraints Margin and view that is not displayed

score 2 · Accepted Answer

e.stopPropagation() is used to stop the propagation of a event, with the aim of not carrying out another execution.

Look at the following example.

function showContent(e) {
  alert('hola soy ' + this.id)
  //e.stopPropagation()
}

var divs = document.querySelectorAll('div')
divs.forEach(function (element) {
  element.addEventListener('click', showContent)
})

* { margin: 0; padding: 0; }

div {
  margin: auto;
  padding: 2em;
  position: relative;
  text-align: center;
  max-width: 260px;
}

div::before {  
  position: absolute;
  top: 10px;
}

#uno { background: red; }
#dos { background: lightgreen; }
#tres { background: skyblue; }

#uno::before { content: "1"; }
#dos::before { content: "2"; }
#tres::before { content: "3"; }

<div id="uno">
  <div id="dos">    
    <div id="tres"></div>
  </div>
</div>

When you click on the element with the number three you will see that the click event is propagated to the parent elements, this is considered bubbling.

How about decompressing the line of code where I use stopPropagation?

You will see that the propagation of the event stops.

I recommend you read about Bubbling y Capturing

I hope I have helped you!