JQuery-stopPropagation.jpg

JQuery stopPropagation

JQuery stopPropagation First let’s see what the Event.stopPropagation method does. To do this, let’s say you click on a DOM element. We want to perform a certain task. By default, a DOM event will be shot when you click on the component. It will preached to all its ancestors

To stop the promotion. You need to use the Event.stopPropagation function for any event class event. Since at that time the program will end like this. Some unwanted effects will be avoided. The Event.stopPropagation method is usually associated with an event. Used at the end of a function. When all the code is executed. We can see this in this example.

JQuery stopPropagation Ex 01

$( "selector" ).click(function( event ) {
  event.stopPropagation();
});

JQuery stopPropagation code after the event handler has finished processing. You may have seen codes such as prevention default () and false return. Sometimes JQuery stopPropagation() calls are also seen. Let’s find out the difference between them.

JQuery stopPropagation Ex 02

var stop = false;
// do your logic here
if(stop){
    event.stopPropagation();
}
1) Prevent Default vs. False Return Stop Promotion if you do not use jQuery.
  • Stop propagation prevents bubbles of user-defined events.
    • See here to capture and bubble to find events and event handlers.
    • User-defined events when developers. Writes their own event handler.
    • In other words, it blocks the action of the event handler written by the user.
  • Resistance prevents the action of the default defined event.
    • Built-in events such as anchor tags (visiting your site).
    • In other words, it blocks the action of the basic event.
  • When using jQuery and when not using it. The response to return lies is different.
    • When jQuery is not used it works like default by default.

JQuery stopPropagation Ex 03

<a href="http://learncodding.com">
		<div id="div1">
			<input type="label" id="label1" value="[Click me]"/>
		</div>
	</a>
	<script>
		document.getElementById('div1').onclick = function() { 
			alert('click div1'); 
		};
		document.getElementById('label1').onclick = function(e) { 
			alert('click label1'); 
			//e.stopPropagation();
		};
	</script>
  • Comments only e.JQuery stopPropagation(). The “Click Label 1” warning window pops up. And visit the “learncodding.com” site (the “click div1” warning window does not appear. That is, it prevents bubbles).
  • uncomment only e.preventDefault (). The “Click Label 1” warning window pops up. And the “Click 1 Div” warning window pops up. But does not go to “learncodding.com” (i.e., blocks basic facts).
  • uncomment only false return. The “Click Label 1” warning window pops up and the “Click Div ​​1” warning window pops up. But does not go to “learncodding.com” (i.e., blocks basic facts).
  • The behavior of e.preventDefault and return false is the same except jQuery.
2) Prevent Default vs. False Return Stop Promoting when using jQuery.
  • Same as stop propagation.
  • Resistance is the same as default.
  • The return response when using jQuery and when not using it is different.
    • When using jQuery, it works like the default prevention.
  • Comments only e.JQuery stopPropagation(). Same as above.
    • uncomment only e.preventDefault (). Same as above.
    • uncomment only false returns. The “Click Label 1” warning window pops up. The “Click DV1” warning window does not open and does not go to “mobicon.tistory.com”.
    • In conclusion, if you type return false using jQuery, stopPropgation () and preventDefault (). Is applied at the same time.

JQuery stopPropagation Ex 02

<p>
   <a id="inside" href="http://www.web-deli.com/">サンプルページへ</a>
</p>
<script>
$('#inside').click(function(e) {
    window.alert('#inside');
});
</script>

In this case, the audience works in the following order. Internal Audience 1. Inside the audience2. The stop propagation method suppresses event bubbles. As a result, occur in the material. Events will no longer promoted on higher elements. So only # outside listeners will avoid.

Leave a Reply

Your email address will not be published.