1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108
| <!doctype html>
<html lang="fr">
<head>
<meta charset="utf-8">
<title>parcours d un événement</title>
<style type="text/css">
* {margin:0;padding:0;}
body {margin:10px;background:#000;color:#ddd;font:bold 1em Helvetica, Arial, sans-serif;}
h1 {margin:0 0 20px 0;}
h2 {margin:20px 0 0 0;}
div {width:300px;height:200px;display:inline-block;vertical-align:middle;background:#333;}
p {margin:20px;padding:10px;background:#666;text-align:center;}
a {margin:10px;padding:10px;display:block;background:#999;}
pre {margin:20px 0;background:#ccc;color:#333;font:0.8em Courier New;}
.texte {margin:20px 0;padding:10px;background:#333;text-align:left;font-size:0.8em;}
</style>
</head>
<body>
<h1>Parcours d un événement</h1>
<h2>Illustration</h2>
<p class="texte">Cliquer sur la zone la plus claire.</p>
<div id="dc">
<p id="pc">
<a id="c">Capture</a>
</p>
</div>
<div id="db">
<p id="pb">
<a id="b">Bouillonnement</a>
</p>
</div>
<h2>Code</h2>
<pre>
// illustration de la capture
// on empêche le bouillonnement depuis l'élément central
document.getElementById('c').addEventListener('click', function(e) {
e.stopPropagation();
this.style.backgroundColor = '#f00';
return false;
}, false);
// la zone intermédiaire restera grise
document.getElementById('pc').addEventListener('click', function(e) {
this.style.backgroundColor = '#0f0';
return false;
}, false);
// cette zone accepte la capture d'événement et deviendra jaune
document.getElementById('dc').addEventListener('click', function(e) {
this.style.backgroundColor = '#ff0';
return false;
}, true);
// illustration du bouillonnement,
// aucun élément n'accepte la capture
document.getElementById('b').addEventListener('click', function(e) {
this.style.backgroundColor = '#f00';
return false;
}, false);
// on empêche le bouillonnement au niveau de la zone intermédiaire qui deviendra verte
document.getElementById('pb').addEventListener('click', function(e) {
e.stopPropagation();
this.style.backgroundColor = '#0f0';
return false;
}, false);
// la zone englobante restera grise
document.getElementById('db').addEventListener('click', function(e) {
this.style.backgroundColor = '#ff0';
return false;
}, false); </pre>
<script>
// illustration de la capture
// on empêche le bouillonnement depuis l'élément central
document.getElementById('c').addEventListener('click', function(e) {
e.stopPropagation();
this.style.backgroundColor = '#f00';
return false;
}, false);
// la zone intermédiaire restera grise
document.getElementById('pc').addEventListener('click', function(e) {
this.style.backgroundColor = '#0f0';
return false;
}, false);
// cette zone accepte la capture d'événement et deviendra jaune
document.getElementById('dc').addEventListener('click', function(e) {
this.style.backgroundColor = '#ff0';
return false;
}, true);
// illustration du bouillonnement,
// aucun élément n'accepte la capture
document.getElementById('b').addEventListener('click', function(e) {
this.style.backgroundColor = '#f00';
return false;
}, false);
// on empêche le bouillonnement au niveau de la zone intermédiaire qui deviendra verte
document.getElementById('pb').addEventListener('click', function(e) {
e.stopPropagation();
this.style.backgroundColor = '#0f0';
return false;
}, false);
// la zone englobante restera grise
document.getElementById('db').addEventListener('click', function(e) {
this.style.backgroundColor = '#ff0';
return false;
}, false);
</script>
</body>
</html> |
Partager