Beispiel:JS-DOM-Tut-5b.html
Aus SELFHTML-Wiki
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" media="screen" href="./Beispiel:SELFHTML-Beispiel-Grundlayout.css">
<title>Events und stopPropagation</title>
<script>
'use strict';
document.addEventListener('DOMContentLoaded', function () {
let div = document.querySelector('div');
let button = document.querySelector('button');
div.addEventListener('click', () => {
event.currentTarget.classList.add('chosen');
console.log('Event-Handler für Div.');
});
button.addEventListener('click', event => {
event.currentTarget.classList.add('chosen');
console.log('Event-Handler für Button.');
if (document.getElementById('check').checked) {
event.stopPropagation();
}
});
});
</script>
<style>
div {
width: 20em;
height: 20em;
margin-right: 2em;
border: thin solid;
border-radius: 0 0.8em 0.8em;
display:inline-block;
}
div h2 {text-align:center;}
button {
margin: 8em auto;
width: 8em;
height: 4em;
display: block;
}
div.chosen {
background-color: #dfac20;
}
button.chosen {
background-color: #337599;
color: white;
}
kbd {
background: #f9f9f9 linear-gradient(to bottom, #eee, #f9f9f9, #eee) repeat scroll 0 0;
border: thin solid #aaa;
border-radius: 2px;
box-shadow: 1px 2px 2px #ddd;
font-family: inherit;
font-size: 0.9em;
padding: 0 0.5em;
}
</style>
</head>
<body>
<h1>Events und stopPropagation</h1>
<div>
<h2>Mit oder ohne <br><code>Event.stopPropagation</code></h2>
<button>Drück mich!</button>
</div>
<p>
<label for="check">Stop propagation:</label>
<input type="checkbox" id="check">
</p>
<p>Öffnen Sie die Konsole (<kbd>F12</kbd>) für weitere Informationen.</p>
</body>
</html>
