jquery事件冒泡和事件对象的讲解及jquery实现图片跟着鼠标走

bigegpt 2024-10-24 09:03 16 浏览

和js的相应函数一致，jquery中若响应函数若返回false，可以取消指定元素的默认行为，比如submit的提交，和a的超链接的跳转，一个方法中只要有ruturn方法就会结束，不在往下执行，return的目的是让submit等默认的行为失效，也就是说return true也会使方法停止方法不在往下执行，但默认行为不会失效，要想失效只能return false。

事件冒泡：事件会根据 dom的层次结构像水泡一样不断从下到顶端

解决方式：处理函数中返回false，会对事件停止冒泡，而且还停止了元素的默认行为

<body>
<div id="content">
<span>内层span</span>
</div>
</body>

$(function(){
$("body").click(function(){alert("bodyclick");})
})
$("#content").click(function(){alert("dicClick");})
})
$("span").click(function(){alert("span click");
})

如果我们点击body，会输出body click

如果点击div，会输出 body click div click

如果点击span，会输出body click div click span click

之所以出现这种原因就是因为span在div内，div在body内，所以点击span就相当于点击div，点击div就相当于点击body，所以点击span会出发三个事件机制，这既是事件冒泡，要想防止这种情况出现，需要在每个函数的最后添加return false就可以防止冒泡了

对然return false可以解决这个问题，但是兼容性不是很强，那么如何才能提高兼容性呢？

可以使用e。stopPrppagation（），e为事件对象

具体用法为：$(function(){

$("body").click(function(){alert("bodyclick");})

$("#content").click(function(e){alert("dicClick");e。stopPrppagation（）;})

$("span").click(function(e){alert("span click");e。stopPrppagation（）})

})

e。stopPrppagation（）为阻止事件冒泡，但是没有取消事件的默认行为，要想阻止事件的默认行为，还可以在调用事件对象的preventDefault()方法

事件对象

jquery中获取事件触发光标的x，y坐标是通过事件对象.pageX, 事件对象.pageY的方式获取，这个和js中是有区别的，要注意，事件对象.target可以获得触发事件的元素（最根级的触发元素，冒泡的起始），事件对象.target和this不是一个东西

假如上面是页面结构，给tr，td还有p都添加了onclick事件，

点击tr target是p this是tr

点击td targer是p this是td

点击p target是p this是p

p就是最根级的元素，所以无论点击哪一个target都是p，而this就是点击哪一个就是哪一个，这要区分

当触发事件时，事件对象就会被创建，体现到程序中就是使用事件只需为函数添加一个参数，这参数就是对象

比如：获取事件的x，y

$(function(){
$("body").onmouseover(function(event){
alert(event.pageX+event.pageY);
}
)
})
这里就是通过在方法中写上一个参数event，而这个参数就是事件对象了

事件对象还有属性

which属性：如果是鼠标事件则获得按键（1左键，2中键，3右键）
altkey,shiftkey,ctrlkey属性获得alt，shift，ctrl是否按下为bool值
keyCode（键盘的，小键盘和主键盘的keycode不一样）
charcode（Asc码）

以前通过js的方式写过图片跟着鼠标走，下面写一个jquery的方式实现，图片跟着鼠标走

每天分享，欢迎关注

jquery鼠标移入移出

上一篇：web前端-轻量级框架应用(jQuery基础)
下一篇：超全面!这可能是最全面的 jQuery 知识总结

jquery事件冒泡和事件对象的讲解及jquery实现图片跟着鼠标走

事件对象

每天分享，欢迎关注

相关推荐

idea本地配置连接远程hadoop集群的一些网络问题解决汇总

无缓存不行?例行升级的入门级阿斯加特AN2 SSD装机点评

Ceph运维手册(基于P版本)

Docker 命令大全（docker命令大全记录表）

替代Docker build的Buildah简单介绍

Docker Desktop安装使用指南:零基础教程

大数据开发前要做什么准备?8台Hadoop服务器进行集群规划前配置

Tensorflow分类loss函数总结 tensorflow绘制loss曲线

R语言学习笔记(七) -离散型数据的模型预测2

iOS Runtime详解