Skip to content

Instantly share code, notes, and snippets.

@chenzhihao

chenzhihao/boxes

Last active August 29, 2015 14:03
Show Gist options
  • Save chenzhihao/5fb2a461e08da5960370 to your computer and use it in GitHub Desktop.
Save chenzhihao/5fb2a461e08da5960370 to your computer and use it in GitHub Desktop.
Download ZIP
a html for browser event mechanism description
Raw
boxes
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
body {
background-color: #f1f4f9;
padding: 50px;
color: white;
font-family: monospace;
font-size: 1.3em;
}
div {
padding: 50px;
margin: 0 auto;
border-radius: 5px;
}
#biggest {
background-color: #3ec19e;
width: 70%;
}
#bigger {
background-color: #0099cc;
width: 60%;
}
#big {
background-color: #e74c3c;
width: 30%;
}
#middle {
background-color: #f1c40f;
width: 20%;
}
</style>
</head>
<body>
<div id="biggest">biggest
<div id="bigger">bigger
<div id="big">big
<div id="middle">middle
</div>
</div>
</div>
</div>
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
<script>
$(function() {
jQuery.getScript("http://libs.baidu.com/jquery/1.3.0/jquery.js").success(
function() {
console.log("now we import another jQuery:", jQuery.fn.jquery);
window.jQuery130 = window.jQuery130 || jQuery;
jQuery.noConflict(true);
});
})
$(function() {
$('body').on('click', '#big', function(e) {
$(this).addClass('active');
console.log("#big", this);
e.stopPropagation();
});
$('#bigger').on('click', function(e) {
// e.stopPropagation();
console.log('wow');
// return false;
});
})
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment