首页
学习
活动
专区
圈层
工具
发布

js事件防止冒泡

如今,单击button不会再折叠样式转换器。而单击边框则会触发折叠操作。可是,单击标签相同什么也不会发生,由于它也是一个后代元素。实际上。...默认操作 假设我们把单击事件处理程序注冊到一个锚元素,而不是一个外层的上,那么就要面对另外一个问题:当用户单击链接时。浏览器会载入一个新页面。...这样的行为与我们讨论的事件处理程序不是同一个概念,它是单击锚元素的默认操作。类似地,当用户在编辑完表单后按下回车键时。会触发表单的submit事件,在此事件发生后,表单提交才会真正发生。...在表单提交期间。我们会对用户是否填写了必填字段进行检查。假设用户没有填写对应字段,那么就须要阻止默认操作。我们将在第8章具体讨论表单验证。...这是对在事件对象上同一时候调用.stopPropagation()和.preventDefault()的一种简写方式。

3.3K40
  • 您找到你想要的搜索结果了吗?
    是的
    没有找到

    阻止a标签的默认事件及延伸

    看如下实例: (1)把单击事件处理程序注册到一个锚元素,而不是一个外层的上,那么就要面对另外一个问题:当用户单击链接时,浏览器会加载一个新页面。...(2)当用户在编辑完表单后按下回车键时,会触发表单的submit事件,在此事件发生后,表单提交才会真正发生。 这种行为与我们讨论的事件处理程序不是同一个概念,它是单击标签元素的默认操作。...如果我们不希望执行这种默认操作,那么在事件对象上调用.stopPropagation()方法也无济于事,因为默认操作不是在正常的事件传播流中发生的。...如链接,提交按钮submit”>等。...//仅仅是在HTML事件属性 和 DOM0级事件处理方法中 才能通过返回 return false 的形式组织事件宿主的默认行为。

    3.1K60

    jquery 绑定事件 - blur() 失去焦点 - focus() 获取焦点

    事件函数列表 blur() 元素失去焦点 focus() 元素获得焦点 click() 鼠标单击 mouseover() 鼠标进入(进入子元素也触发) mouseout() 鼠标离开(离开子元素也触发)...hover() 同时为mouseenter和mouseleave事件指定处理函数 ready() DOM加载完成 resize() 浏览器窗口的大小发生改变 scroll() 滚动条的位置发生变化 submit...() 用户递交表单 编写一个form表单,用来演示输入框获取焦点和失去焦点的示例 ?...当刚进入页面,文本框就自动获取焦点,这基本上就是这个方法的大部分用法了。 blur() 元素失去焦点 使用blur()失去焦点这个方法一般会结合获取文本框内容的函数一起使用,如下: ?.../jquery-3.3.1.min.js"> $(function(){

    14K30

    一文深入JQuery

    或表示动画时长的毫秒数值(如:1000) easing:用来指定切换效果,默认是"swing",可用参数"linear" swing:动画执行时效果是 先慢,中间快,最后又慢 linear:动画执行时速度是匀速的 fn:在动画完成时执行的函数...对象.each(function(index,element){}); index:就是元素在集合中的索引 element:就是集合中的每一个元素对象 this:集合中的每一个元素对象 回调函数返回值:...表单对象.submit();//让表单提交 on绑定事件/off解除绑定 jq对象.on(“事件名称”,回调函数) jq对象.off(“事件名称”) 如果off方法不传递任何参数,则将组件上的所有事件全部解绑...事件切换:toggle jq对象.toggle(fn1,fn2…) 当单击jq对象对应的组件后,会执行fn1.第二次点击会执行fn2… 注意:1.9版本 .toggle() 方法删除,jQuery...使用 show/hide方法来完成广告的显示 */ //入口函数,在页面加载完成之后,定义定时器,调用这两个方法 $(function () { //定义定时器,调用adShow

    4.7K30

    JQuery最全常用方法指南

    在每个对 象上,这个事件处理函数只会被执行一次。其他规则与bind()函数相同。 trigger(type, [data]) 在每一个匹配的元素上触发某类事件。...value值 $("input").val("test"); //将表单输入框的value值设为test $("#msg").click(); //触发id为msg的元素的单击事件 $("#msg")....click(fn); //为id为msg的元素单击事件添加函数 同样blur, focus, select, submit事件都可以有着两种调用方法 5、集合处理功能 对于jquery返回的集合内容无需我们自己循环遍历并对每个对象分别做处理...已经为我们提供了各种事件处理方法,我们无需在html元素上直接写事件,而可以直接为通过jquery获取的对象添加事件。...p元素上的所有事件 $("p").unbind("click") //删除所有p元素上的单击事件 10、几个实用特效功能 其中toggle()和slidetoggle()方法提供了状态切换功能。

    13.1K31

    JQuery入门

    的核心函数,为 ()方法传入一个function() {} 作为参数,就相当于window.οnlοad=function(){写代码}重点2:使用 {}查找元素,使用.click()来绑定点击响应函数,把单击响应函数作为...子元素过滤器里面nth-child(2n-1),这里的n是从1开始取值 表单里面的button标签,会被默认作为submit提交按钮 jquery里面提供的增强for循环.each方法 对选择器的小总结...为$ ()方法传入一个function() {} 作为参数,就相当于window.οnlοad=function(){写代码} 重点2:使用$ {}查找元素,使用.click()来绑定点击响应函数,把单击响应函数作为...基本选择器里面补充的组合选择器 层级选择器 基本过滤选择器 内容过滤选择器 可见性过滤选择器 属性过滤选择器 子元素过滤选择器 子元素过滤器里面nth-child(2n-1),这里的n是从1开始取值 表单里面的...button标签,会被默认作为submit提交按钮 表单对象选择器 表单对象属性过滤选择器 表单选择器加表单对象属性过滤选择器完整版本 jquery里面提供的增强for循环.each方法 ----

    5.7K20

    Zepto源码分析之form模块

    原文链接 github项目地址 表单相关回顾 在开始学些form模块相关方法前,我们先来回顾一下表单提交时,浏览器是怎么样将数据发送给服务器的(以下内容摘自《JavaScript高级程序设计》第14...(也就是属性disabled为true的) 只发送勾选的复选框和单选按钮 不发送type为reset和button的按钮 多选选择框中每个选择的值单独一个条目 在单击提交按钮表单的情况下,也会发送提交按钮的...在表单序列化得过程中,一般不包含任何按钮字段,因为结果字符串很可能是通过其他方式提交的,除此之外其他规则都应该遵循。...= 'checkbox') || field.checked)) add($(field).val()) }) return result } 在$的原型上添加了serializeArray...如果传了回调函数,则在选中的元素上添加submit事件 if (0 in arguments) this.bind('submit', callback) // 否则在没有传递回调函数的情况下

    1.7K10

    Zepto源码分析之form模块

    表单相关回顾 在开始学些form模块相关方法前,我们先来回顾一下表单提交时,浏览器是怎么样将数据发送给服务器的(以下内容摘自《JavaScript高级程序设计》第14章 14.4节 表单序列化)...(也就是属性disabled为true的) 只发送勾选的复选框和单选按钮 不发送type为reset和button的按钮 多选选择框中每个选择的值单独一个条目 在单击提交按钮表单的情况下,也会发送提交按钮的...在表单序列化得过程中,一般不包含任何按钮字段,因为结果字符串很可能是通过其他方式提交的,除此之外其他规则都应该遵循。...= 'checkbox') || field.checked)) add($(field).val()) }) return result } 在$的原型上添加了serializeArray...如果传了回调函数,则在选中的元素上添加submit事件 if (0 in arguments) this.bind('submit', callback) // 否则在没有传递回调函数的情况下

    2.5K100
    领券