jq事件

单位：
px em rem pt
vh vw手机适用
rpx upx
基本事件：
//offset 元素 基准点为元素的左上角
//page 页面 当前页面左上角
//Screen 屏幕 显示器左上角
//client 可视区域 显示页面的区域的左上角
//click鼠标单击事件
//页面没有滚动时，page与client基准点重合
style样式：
<style>
.parent{
width: 100px;
height: 100px;
margin: 0 auto;
background-color: aquamarine;
padding: 50px ;
}
.parent .child{
width: 100px;
height: 100px;
/* padding: 50px ; */
background-color: pink;
}
<script>
$(function(){
$(".child").click(function(){
console.log(0)
})
$(".child").mousemove(function(){
console.log(e.offsetX,e.offsetY)
})
})
</script>
<body>
<div class="parent">
<div class="child"></div>
</div>
</body>
鼠标移入和移出
<script>
$(function(){
$(".child").hover(function(){
$(this).css("background-color","red");
},function(){
$(this).css("background-color","pink");
})
})
</script>
<body>
<div class="parent">
<div class="child"></div>
</div>
</body>

效果：鼠标移入前

鼠标移入：

 

冒泡事件：
<script>
$(function(){
//冒泡事件 在鼠标单击事件时需要阻止事件冒泡 在哪里阻止冒泡就在那里加阻止
function stopPropagation(e){
e.stopPropagation();//阻止事件冒泡
e.preventDefault();//阻止默认行为 eg:reset submit a[href]
return false;//用于阻止前两个阻止不了的冒泡事件
}
$(".child").click(function(e){
console.log(".child")
return stopPropagation(e);
})

$(".parent").click(function(){
console.log(".parent")
})
})
</script>
<body>
<div class="parent">
<div class="child"></div>
</div>
</body>

posted @ 2021-11-10 11:38  与神明画过押  阅读(32)  评论(0)    收藏  举报