Főoldalra

jQuery propagation

event.stopPropagation().                               Leállítja kattintási eseményt, az elemhez tartozó szülő elemeknél.

event.isPropagationStopped().                      Ellenőrzi , hogy event.stopPropagation() volt az utolsó esemény.
                                                                         Ez a módszer true (igaz), ha event.stopPropagation () az utolsó esemény, és false (hamis), ha nem.

event.stopImmediatePropagation().             Megakadályozza, hogy kettő vagy több kattintási esemény járuljon, ugyanazon elemhez.

event.isImmediatePropagationStopped().    Ellenőrzi, hogy az event.stopImmediatePropagation() nevezték az eseményként.
                                                                         Ez a módszer true (igaz), ha event.stopImmediatePropagation () nevezik, és false (hamis), ha nem.



event.stopPropagation.

A event.stopPropagation () leállítja kattintási eseményt, az elemhez tartozó szülő elemeknél.

Példák a leszármazottakra:
1.Példa: p elem a gyermek, div elem a szülő. <div> <p> </p> </div>
2.Példa: span elem a gyermek, p elem a szülő, div elem a nagyszülő. <div> <p> <span> </span> </p> </div>

A p elem szülőeleme a div elem, a span elem szülőeleme a p elem.
Ha a span elemre kattintunk, elsőnek a span klikket írja ki, majd a szülőelemét p, és ez követően a p szülőelemét div.
Ha a span elemre meghatározzuk a event.stopPropagation(); metódust, akkor a többi szűlőelemet nem írja ki.

Kattintson lent, a bekeretezett terület egyes elemei felett.
Ha rákattint a div elemre, figyelmeztetni fogja, hogy a div elemen kattintottak.
Ha rákattint a p elemre, akkor vissza fog térni mind a p és a div elem, mivel a p elem a div elem belsejében van.
Ha rákattint a span elemre, ekkor csak visszatér, és nem figyeli a szülő P és div elemet (annak ellenére, hogy ezen elemek belsejében van).

Tiltsuk le, vagy távolítsuk el az event.stopPropagation () sort, a span elemnél.
Majd kattintsunk a span elemen (Most a kattintási esemény, szülő elemekre is hatással lesz).


1. Példa. Nem alkalmazzuk az
event.stopPropagation(); meghatározást. 
<head>
<script>
$(document).ready(function(){
    $("#span01").click(function(event){
		$(this).css("background-color", "yellow");
             alert("A span elemen kattintottak.");
    });
    $("#pszulo01").click(function(event){
		$(this).css("background-color", "pink");
        alert("A p elemen kattintottak.");
    });
    $("#divnagyszulo").click(function(){
		$(this).css("background-color", "orange");
        alert("A div elemen kattintottak.");
    });
});
</script>
</head>
<body>
<div id="divnagyszulo" style="width:85%; padding:15px;">
<p id="pszulo01">Ez "p" elem, szülő eleme a div elem. <br />
<span id="span01">span elem, szülő eleme a p elem.</span>
</p>
</div>
</body>


<div>

<p>Ez "p" elem, szülő eleme a div elem.

<span> span elem, szülő eleme a p elem.</span>

</p>

</div>


2. Példa. Alkalmazzuk az
event.stopPropagation(); meghatározást. 
<head>
<script>
$(document).ready(function(){
    $("#span02").click(function(event){
		$(this).css("background-color", "yellow");
       event.stopPropagation();
        alert("A span elemen kattintottak.");
    });
    $("#pszulo02").click(function(event){
		$(this).css("background-color", "pink");
       event.stopPropagation();
        alert("A p elemen kattintottak.");
    });
    $("#divnagyszulo02").click(function(){
		$(this).css("background-color", "orange");
        alert("A div elemen kattintottak.");
    });
});
</script>
</head>
<body>
<div id="divnagyszulo02" style="width:85%; padding:15px;">
<p id="pszulo02">Másik "p" elem, szülő eleme a div elem.<br />
<span id="span02">span elem, szülő eleme a p elem.</span>
</p>
</div>
</body>
<div>

<p>Másik "p" elem, szülő eleme a div elem.

<span> span elem, szülő eleme a p elem.</span>

</p>

</div>





3. Példa. Alert üzenő ablak nélkül.
Megegyezik az 1. példával.

<div>

<p>Ez "p" elem, szülő eleme a div elem.

<span> span elem, szülő eleme a p elem.</span>

</p>

</div> 
<head>
<script>
$(document).ready(function(){
    $("#span03").click(function(event){
		$(this).css("background-color", "yellow");
    });
    $("#divnagyszulo03>p").click(function(event){
		$(this).css("background-color", "pink");
    });
    $("#divnagyszulo03").click(function(){
		$(this).css("background-color", "orange");
    });
});
</script>
</head>
<body>
<div id="divnagyszulo03" style="width:85%; padding:15px;">
<p>Ez "p" elem, szülő eleme a div elem. <br />
<span id="span03">span elem, szülő eleme a p elem.</span>
</p>
</div>
</body>



4. Példa. Alert üzenő ablak nélkül.
Megegyezik a 2. példával.

<div>

<p>Másik "p" elem, szülő eleme a div elem.

<span> span elem, szülő eleme a p elem.</span>

</p>

</div> 
<head>
<script>
$(document).ready(function(){
    $("#span04").click(function(event){
		$(this).css("background-color", "yellow");
       event.stopPropagation();
    });
    $("#divnagyszulo04 > p").click(function(event){
		$(this).css("background-color", "pink");
       event.stopPropagation();
    });
    $("#divnagyszulo04").click(function(){
		$(this).css("background-color", "orange");
    });
});
</script>
</head>
<body>
<div id="divnagyszulo04" style="width:85%; padding:15px;">
<p>Másik "p" elem, szülő eleme a div elem.<br />
<span id="span04">span elem, szülő eleme a p elem.</span>
</p>
</div>
</body>



event.isPropagationStopped

Az event.isPropagationStopped () metódus ellenőrzi , hogy event.stopPropagation() volt az utolsó esemény.
Ez a módszer true (igaz), ha event.stopPropagation () az utolsó esemény, és false (hamis), ha nem.

$(document).ready(function(){
    $("#divisProp").click(function(event){
        $(this).css("background-color", "yellow");
           event.stopPropagation();
              alert("Utoljára,  event.stopPropagation() volt a hívott?\n Eredmény: " +  event.isPropagationStopped());
    });
	
    $("#divisProp02").click(function(event){
        $(this).css("background-color", "yellow");
             alert("Utoljára,  event.stopPropagation() volt a hívott?\n Eredmény: " +  event.isPropagationStopped());
    });
});

<div id="divisProp">
Kattints erre a div elemre.
</div>



<div id="divisProp02">
Kattints erre a div elemre.
</div>





event.stopImmediatePropagation().

addEventListener() módszerhez.
Megakadályozza, hogy kettő vagy több kattintási esemény járuljon, ugyanazon elemhez. Stoppolja második vagy további eseménykezelőt. Hatására, egy elemhez, csak az elsőnek meghívott esemény járulhat.

Megjegyzés: A stopImmediatePropagation() módszert, nem támogatják IE8 és a korábbi verziók.

1. PÉLDA. 
<head>
<script>
$(document).ready(function(){
function eFugvveny(event) {
		$(this).css("border", "5px solid red");
    alert ("Hello World!\nEz az első esemény.");
}

function mFuggveny() {
		$(this).css("background-color", "orange");
    alert ("Hello World!\nEz a második esemény.");   
}

function hFuggveny() {
		$(this).css("font-size", "22px");
    alert ("Hello World!\nEz a harmadik esemény.");
}

var x = document.getElementById("mydiv");
x.addEventListener("click", eFugvveny);     // 1. függvény meghívása.
x.addEventListener("click", mFuggveny);     // 2. függvény meghívása.
x.addEventListener("click", hFuggveny);     // 3. függvény meghívása.
});
</script>
</head>
<body>
<div id="mydiv">
Próbáld ki. Kattints erre a div elemre.
</div>
2. PÉLDA. 
<head>
<script>
$(document).ready(function(){
function EFugvveny(event) {
		$(this).css("border", "5px solid red");
 alert ("Hello World!\nEz az első esemény.\nTovábbi eseményeket, letiltották.");
    event.stopImmediatePropagation();
}

function MFuggveny() {
		$(this).css("background-color", "orange");
    alert ("Hello World!\nEz a második esemény.");   
}
function HFuggveny() {
		$(this).css("font-size", "22px");
    alert ("Hello World!\nEz a harmadik esemény.");
}

var x = document.getElementById("mydiv02");
x.addEventListener("click", EFugvveny);     // 1. függvény meghívása.
x.addEventListener("click", MFuggveny);     // 2. függvény meghívása.
x.addEventListener("click", HFuggveny);     // 3. függvény meghívása.
});
</script>
</head>
<body>
<div id="mydiv02">
Próbáld ki. Kattints erre a div elemre.
</div>




event.isImmediatePropagationStopped

Ellenőrzi, event.stopImmediatePropagation() függvényt, meghatározták eseményként, vagy nem.)
A módszer true (igaz), ha event.stopImmediatePropagation() meghatározták, és false (hamis), ha nem.

1. PÉLDA. 



<div id="isimProStop"

Kattints erre a div elemre, 
az event.stopImmediatePropagation() teszteléséhez.

</div>




2. PÉLDA.





<div id="isimProStop02"

Kattints erre a div elemre, 
az event.stopImmediatePropagation() teszteléséhez.

</div>


















Halmozás eredménye.

  event.stopImmediatePropagation();

  immediatePropStopped( event );






<head>
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>

<script>
function immediatePropStopped( event ) {
  var uzenet = "";
  if ( event.isImmediatePropagationStopped() ) {
    uzenet = "Hívott";
  } else {
    uzenet = "Nem hívott";
  }
  $( "#stop-bejelentkezes" ).append( "
" + uzenet + "
" );
}
 
$( "#btnuzenet" ).click(function( event ) {
  immediatePropStopped( event );
      event.stopImmediatePropagation();
  immediatePropStopped( event );
      event.stopImmediatePropagation();
  immediatePropStopped( event );
});
</script>
</head>
<body>

<button id="btnuzenet">Kattint ide!</button>
<div id="stop-bejelentkezes"></div>


































TESZT. Propagation események, eredményei: