网站开发人员结构,找营销推广团队,客户管理app,360 网站优化知识点#xff1a; event.stopPropagation() 阻止冒泡 event.preventDefault() 阻止默认事件#xff0c;比如button提交后跳转到链接页面 两者都可以用 return false 代替。 冒泡事件就是点击子节点#xff0c;会向上触发父节点#xff0c;祖先节点的点击事件。 下面是h… 知识点 event.stopPropagation() 阻止冒泡 event.preventDefault() 阻止默认事件比如button提交后跳转到链接页面 两者都可以用 return false 代替。 冒泡事件就是点击子节点会向上触发父节点祖先节点的点击事件。 下面是html代码部分 body
div idcontent外层div元素span内层span元素/span外层div元素
/divdiv idmsg/div /body 对应的jQuery代码如下 script typetext/javascript
$(function(){// 为span元素绑定click事件 $(span).bind(click,function(){ var txt $(#msg).html() p内层span元素被点击.p/;//获取html信息 $(#msg).html(txt);// 设置html信息 }); // 为div元素绑定click事件 $(#content).bind(click,function(){ var txt $(#msg).html() p外层div元素被点击.p/; $(#msg).html(txt); }); // 为body元素绑定click事件 $(body).bind(click,function(){ var txt $(#msg).html() pbody元素被点击.p/; $(#msg).html(txt); }); }) /script 当点击span时会触发div与body 的点击事件。点击div时会触发body的点击事件。 如何防止这种冒泡事件发生呢 修改如下 内部阻止冒泡方法event.stopPropagation(); script typetext/javascript
$(function(){// 为span元素绑定click事件 $(span).bind(click,function(event){ var txt $(#msg).html() p内层span元素被点击.p/; $(#msg).html(txt); event.stopPropagation(); // 阻止事件冒泡 }); // 为div元素绑定click事件 $(#content).bind(click,function(event){ var txt $(#msg).html() p外层div元素被点击.p/; $(#msg).html(txt); event.stopPropagation(); // 阻止事件冒泡 }); // 为body元素绑定click事件 $(body).bind(click,function(){ var txt $(#msg).html() pbody元素被点击.p/; $(#msg).html(txt); }); }) /script event.stopPropagation(); // 阻止事件冒泡 有时候点击提交按钮会有一些默认事件。比如跳转到别的界面。但是如果没有通过验证的话就不应该跳转。这时候可以通过设置event.preventDefault(); //阻止默认行为 ( 表单提交 )。 下面是案例 script typetext/javascript
$(function(){$(#sub).bind(click,function(event){ var username $(#username).val(); //获取元素的值val() 方法返回或设置被选元素的值。 if(username){ //判断值是否为空 $(#msg).html(p文本框的值不能为空./p); //提示信息 event.preventDefault(); //阻止默认行为 ( 表单提交 ) } }) }) /script html部分 body
form actiontest.html
用户名input typetext idusername / br/ input typesubmit value提交 idsub/ /form div idmsg/div /body 还有一种防止默认行为的方法就是return false。效果一样。 代码如下 script typetext/javascript
$(function(){$(#sub).bind(click,function(event){ var username $(#username).val(); //获取元素的值 if(username){ //判断值是否为空 $(#msg).html(p文本框的值不能为空./p); //提示信息 return false; } }) }) /script 同理上面的冒泡事件也可以通过return false来处理。 script typetext/javascript
$(function(){// 为span元素绑定click事件 $(span).bind(click,function(event){ var txt $(#msg).html() p内层span元素被点击.p/; $(#msg).html(txt); return false; }); // 为div元素绑定click事件 $(#content).bind(click,function(event){ var txt $(#msg).html() p外层div元素被点击.p/; $(#msg).html(txt); return false; }); // 为body元素绑定click事件 $(body).bind(click,function(){ var txt $(#msg).html() pbody元素被点击.p/; $(#msg).html(txt); }); }) /script 转载于:https://www.cnblogs.com/shimily/articles/3939013.html
