$("#but").click(function (event) {
  event.preventDefault()
})
$("#foo").click(function () {
  alert("parent click event fired!")
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="foo">
  <button id="but">button</button>
</div>

Antwoord 2, autoriteit 25%

Terminologie

Van quirksmode.org:

Gebeurtenis vastleggen

Wanneer u gebeurtenisregistratie gebruikt

| |
---------------| |-----------------
| element1 | | |
| -----------| |----------- |
| |element2 \ / | |
| ------------------------- |
| Evenement VASTLEGGEN |
-----------------------------------

de event-handler van element1 wordt als eerste geactiveerd, de event-handler van element2 als laatste.

Gebeurtenis borrelen

Als je event bubbels gebruikt

/ \
---------------| |-----------------
| element1 | | |
| -----------| |----------- |
| |element2 | | | |
| ------------------------- |
| Evenement BUBBELING |
-----------------------------------

de event-handler van element2 wordt als eerste geactiveerd, de event-handler van element1 als laatste.

Elke gebeurtenis die plaatsvindt in het W3C-gebeurtenismodel wordt eerst vastgelegd totdat deze het doelelement bereikt en vervolgens weer opborrelt.

| | / \
-----------------| |--| |-----------------
| element1 | | | | |
| -------------| |--| |----------- |
| |element2 \ / | | | |
| -------------------------------- |
| W3C-gebeurtenismodel |
------------------------------------------

Interface

Van w3.org, voor gebeurtenis vastleggen:

Als de vastleggende EventListenerverdere verwerking van:
de gebeurtenis zich voordoet, kan de methode stopPropagationvan de . worden aangeroepen
Eventinterface. Dit voorkomt verdere verzending van het evenement,
hoewel aanvullende EventListenersgeregistreerd zijn in dezelfde hiërarchie
niveau zal het evenement nog steeds ontvangen. Zodra een evenement stopPropagation
methode is aangeroepen, hebben verdere aanroepen van die methode geen
bijkomend effect. Als er geen extra vangers bestaan ​​en
stopPropagationis niet aangeroepen, de gebeurtenis activeert de
geschikte EventListenersop het doel zelf.

Voor event borrelen:

Elke gebeurtenis-handler kan ervoor kiezen om verdere verspreiding van gebeurtenissen te voorkomen door:
aanroepen van de stopPropagationmethode van de Eventinterface. indien van toepassing
EventListenerroept deze methode aan, alle extra EventListenersop de
huidige EventTargetwordt geactiveerd, maar daarna stopt het bubbelen
peil. Slechts één aanroep naar stopPropagationis nodig om verdere te voorkomen
borrelen.

Voor geannuleerd evenement:

Annulering wordt bereikt door de Event‘s preventDefaultaan te roepen
methode. Als een of meer EventListenerspreventDefaultaanroepen tijdens
elke fase van de gebeurtenisstroom wordt de standaardactie geannuleerd.

Voorbeelden

In de volgende voorbeelden activeert een klik op de hyperlink in de webbrowser de stroom van de gebeurtenis (de gebeurtenislisteners worden uitgevoerd) en de standaardactie van het gebeurtenisdoel (een nieuw tabblad wordt geopend).

HTML:

<div id="a">
  <a id="b" href="http://www.google.com/" target="_blank">Google</a>
</div>
<p id="c"></p>

JavaScript:

var el = document.getElementById("c");
function capturingOnClick1(ev) {
    el.innerHTML += "DIV event capture<br>";
}
function capturingOnClick2(ev) {
    el.innerHTML += "A event capture<br>";
}
function bubblingOnClick1(ev) {
    el.innerHTML += "DIV event bubbling<br>";
}
function bubblingOnClick2(ev) {
    el.innerHTML += "A event bubbling<br>";
}
// The 3rd parameter useCapture makes the event listener capturing (false by default)
document.getElementById("a").addEventListener("click", capturingOnClick1, true);
document.getElementById("b").addEventListener("click", capturingOnClick2, true);
document.getElementById("a").addEventListener("click", bubblingOnClick1, false);
document.getElementById("b").addEventListener("click", bubblingOnClick2, false);

Voorbeeld 1: het resulteert in de uitvoer

DIV event capture
A event capture
A event bubbling
DIV event bubbling

Voorbeeld 2: stopPropagation()aan de functie toevoegen

function capturingOnClick1(ev) {
    el.innerHTML += "DIV event capture<br>";
    ev.stopPropagation();
}

resultaten in de uitvoer

DIV event capture

De gebeurtenislistener verhinderde verdere neerwaartse en opwaartse verspreiding van de gebeurtenis. Het verhinderde echter niet de standaardactie (een nieuw tabblad openen).

Voorbeeld 3: stopPropagation()toevoegen aan de functie

function capturingOnClick2(ev) {
    el.innerHTML += "A event capture<br>";
    ev.stopPropagation();
}

of de functie

function bubblingOnClick2(ev) {
    el.innerHTML += "A event bubbling<br>";
    ev.stopPropagation();
}

resultaten in de uitvoer

DIV event capture
A event capture
A event bubbling

Dit komt omdat beide gebeurtenislisteners zijn geregistreerd op hetzelfde gebeurtenisdoel. De gebeurtenislisteners verhinderden verdere opwaartse verspreiding van de gebeurtenis. Ze hebben echter de standaardactie (het openen van een nieuw tabblad) niet voorkomen.

Voorbeeld 4: preventDefault()toevoegen aan een functie, voor instantie

function capturingOnClick1(ev) {
    el.innerHTML += "DIV event capture<br>";
    ev.preventDefault();
}

voorkomt dat een nieuw tabblad wordt geopend.

Antwoord 3, autoriteit 7%

retourneer false;

return false;doet 3 verschillende dingen als je het aanroept:

1. event.preventDefault() Het stopt het standaardgedrag van de browser.
2. event.stopPropagation() Het voorkomt dat de gebeurtenis de DOM verspreidt (of ‘opborrelt’).
3. Stopt de uitvoering van de callback en keert onmiddellijk terug als er wordt gebeld.

Merk op dat dit gedrag verschilt van normale (niet-jQuery) gebeurtenishandlers, waarbij met name return falseniet voorkomt dat de gebeurtenis opborrelt.

preventDefault();

preventDefault();doet één ding: het stopt het standaardgedrag van de browser.

Wanneer gebruik je ze?

We weten wat ze doen, maar wanneer moeten we ze gebruiken? Het hangt er simpelweg van af wat je wilt bereiken. Gebruik preventDefault();als je ‘gewoon’ het standaard browsergedrag wilt voorkomen. Gebruik return false; wanneer u het standaard browsergedrag wilt voorkomen en wilt voorkomen dat de gebeurtenis de DOM verspreidt. In de meeste situaties waarin u return false zou gebruiken; wat je echt wilt is preventDefault().

Voorbeelden:

Laten we proberen het te begrijpen met voorbeelden:

We zullen een puur JAVASCRIPT-voorbeeld zien

Voorbeeld 1:

<div onclick='executeParent()'>
  <a href='https://stackoverflow.com' onclick='executeChild()'>Click here to visit stackoverflow.com</a>
</div>
<script>
  function executeChild() {
    alert('Link Clicked');
  }
  function executeParent() {
    alert('div Clicked');
  }
</script>

//clicking the link will *not* allow the user to leave the page 
myChildElement.onclick = function(e) { 
    e.preventDefault(); 
    console.log('brick me!'); 
};
//clicking the parent node will run the following console statement because event propagation occurs
logo.parentNode.onclick = function(e) { 
    console.log('you bricked my child!'); 
};

//clicking the element will allow the default action to occur but propagation will be stopped...
myChildElement.onclick = function(e) { 
    e.stopPropagation();
    console.log('prop stop! no bubbles!'); 
};
//since propagation was stopped by the child element's onClick, this message will never be seen!
myChildElement.parentNode.onclick = function(e) { 
    console.log('you will never see this message!'); 
};

<div class="container">
 <a href="#" class="element">Click Me!</a>
</div>
$('.container').on('click', function(e) {
 console.log('container was clicked');
});
$('.element').on('click', function(e) {
  e.preventDefault(); // Now link won't go anywhere
  console.log('element was clicked');
});

$('.container').on('click', function(e) {
  console.log('container was clicked');
});
$('.element').on('click', function(e) {
  e.preventDefault(); // Now link won't go anywhere
  e.stopPropagation(); // Now the event won't bubble up
 console.log('element was clicked');
});

$("#but").click(function(event){
console.log("hello");
  event.preventDefault();
 });
$("#foo").click(function(){
 alert("parent click event fired !");
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="foo">
  <button id="but">button</button>
</div>