zepto
zepto copied to clipboard
Delegation for mouseenter, mouseleave
Wrong work. Events ignore delegation.
<html>
<head>
<script src="http://zeptojs.com/zepto.min.js"></script>
<style>
.div-1 {
background: red;
width: 100px;
height: 100px;
}
.div-2 {
background: blue;
width: 80px;
height: 80px;
}
.div-3 {
background: gray;
width: 60px;
height: 60px;
color: white;
}
</style>
</head>
<body>
<div class="container">
<div class="div-1">
<div class="div-2">
<div class="div-3">
Text
</div>
</div>
</div>
</div>
</body>
</html>
<script>
$('.container').on('mouseenter', '.div-1', function(){
console.log('mouseenter');
});
$('.container').on('mouseleave', '.div-1', function(){
console.log('mouseleave');
});
</script>