首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

js 停止事件冒泡 阻止浏览器的默认行为

在前端开发工作,由于浏览器兼容性等问题,我们会经常用到“停止事件冒泡”和“阻止浏览器默认行为”。...浏览器默认行为: form按回车键就会提交表单;单击鼠标右键就会弹出context menu. a标签 1..停止事件冒泡 JavaScript代码 1 //如果提供了事件对象,则这是一个非IE浏览器...return false; } 但是使用return false时必须注意: 1、jQuery有自己的事件处理层,也对处理程序做了封装,如果事件处理程序返回false,事件冒泡和浏览器默认事件都会被阻止...2、使用原生javaScript,事件处理程序返回false只会阻止浏览器默认行为,而事件冒泡依然存在。 3、浏览器默认行为和事件冒泡是相互独立的。阻止事件冒泡不会影响默认行为,反之亦然。...注意: 有一些浏览器行为是事件处理程序执行前发生的,也就是说这些默认行为是无法取消的,如:大部分浏览器上鼠标移到一个超链接上超链接的样式会发生改变,这个动作是发生在focus事件之前的,是focus

5.3K120
您找到你想要的搜索结果了吗?
是的
没有找到

java表单提交方法_表单提交的几种方式

4、阻止表单提交 只要在表单存在上面列出的任何一种按钮,那么相应表单控件拥有焦点的情况下,按回车键就可以提交表单。如果表单里没有提交按钮,按回车键不会提交表单。...以这种方式提交表单时,浏览器会在将请求发送给服务器之前触发submit事件。这样,我们就有机会验证表单数据,并据以决定是否允许表单提交。阻止这个事件的默认行为就可以取消表单提交。...一般来说,表单数据无效而不能发送给服务器时,可以使用这一技术。 5、JavaScript,以编程方式调用submit()方法也可以提交表单。...这种方式无需表单包含提交按钮,任何时候都可以正常提交表单。...submit事件,因此要记得调用此方法之前先验证表单数字据。

4.9K40

jquery的form表单提交

使用jQuery实现Form表单提交Web开发表单提交是一个常见的操作,通过表单提交用户可以向服务器发送数据。...jQuery是一个流行的JavaScript库,可以简化处理JavaScript的操作,包括表单提交本篇博客,我们将介绍如何使用jQuery来实现表单提交操作。...回调函数,我们阻止了表单的默认提交行为,通过serialize()方法获取表单数据,并使用$.ajax()方法向服务器发送POST请求提交表单数据。...success回调函数处理提交成功的情况,而在error回调函数处理提交失败的情况。 通过以上示例,我们使用jQuery实现了一个简单的表单提交操作。...htmlCopy code当用户填写完表单后,通过点击提交按钮,浏览器会将表单的数据封装成一个HTTP请求,然后发送给服务器

8910

通过ajaxreturn jquery json提交form

配置方式:convention.php定义了默认编码类型为DEFAULT_AJAX_RETURN => 'JSON', 分析:ajaxReturn()调用了json_encode()将数值转换成json...jquery的ajax函数,只能传入3种类型的数据: >1.json字符串:"uname=alice&mobileIpt=110&birthday=1983-05-12" >2.json对象:{uanme...整个过程是: 1.php编写页面表单提交按钮等; 2.jsphp的按钮事件添加校验和触发函数,js函数内,如果js对象的格式和内容正确就向控制器url(php初始化)发起ajax请求...提交表单的时候,建议用$.submit函数,导致重复提交jquery失效!具体原因我也没弄明白。用click事件触发然后用$.ajax提交逻辑上更简单清晰,所以why not?...Index.html $('.submit').click(function(event){ //阻止表单默认提交事件 event.preventDefault(); var

5K30

Jquery 常见案例

/jquery/jquery.validate.js"> (2)定义验证规则 直接在页面表单元素通过属性实现验证规则: <input name="${product}" value=...页面的ready函数里使用ajaxForm来给你页面上的表单做这些AJAX提交的准备工作。 ajaxForm 需要零个或一个参数。这唯一的一个参数可以是一个回调函数或者是一个可选参数对象。...是否可以连环调用: 是。 例子: $('#myFormId').ajaxForm(); ajaxSubmit 立即通过AJAX方式提交表单。最常见的用法是对用户提交表单的动作进行响应时调用它。...submit(function() {     // submit the form     $(this).ajaxSubmit();     // return false,这样可以阻止正常的浏览器表单提交和页面转向...'beforeSubmit'函数调用时需要3个参数:数组形式的表单数据,jQuery 对象形式的表单对象,可选的用来传递给ajaxForm/ajaxSubmit 的对象。

6.7K10

杨老师课堂之Jquery的筛选,事件,效果,Ajax,javascript跨域)

事件对象: 由于IE-DOM和标准DOM实现事件对象的方法各不相同,导致不同 浏览器获取事件对象变得比较困难.针对这个问题,jquery进行了必要的扩 展和封装,从而使得在任何浏览器能很好的轻松的访问获取事件对象以及事...停止事件冒泡 停止时间冒泡可以阻止事件其他对象的事件处理函数被执行.jquery中提供了stopPropagation()方法来阻止冒泡事件....可以用同样的方法解决 元素上的问题 阻止默认行为 网页的元素都有自己默认的行为,例如:单击超链接后悔跳转,单击”提交”按钮会表单提交,有时需要阻止元素的默认行为 jquery,提供了preventDefault...举一个例子,项目中,经常需要验证表单,单击”提交”按钮是,验证表单内容,例如元素是否是必填字段,某元素长度是否够6位,单表单不符合提交条件时,要阻止表单提交 eg: $(“#sub”).bind(...() 方法是mouseover相当于 IE浏览器的event.fromElement()方法,mouse 相当于IE浏览器的event.toElement方法. jquery对其进行了封装,使之能兼容各大浏览器

8.2K20

30分钟全面解析-图解AJAX原理

3.服务端返回Response后,浏览器需要加载整个页面,对浏览器的负担也是很大的。 4.浏览器提交表单后,发送的数据量大,造成网络的性能问题。 问题: 1.如何改进? 2.AJAX是什么?...一、什么是 AJAX  1.为什么需要AJAX 当需要从服务器获取数据,并刷新页面的操作,如果采用AJAX,则需要用提交整个表单的方式,当提交表单时,发送请求给服务器,页面需要等待服务器发送完response...传输过程,我们可以看下HTTP Headers。 三、AJAX提交请求和服务响应的原理 1.代码 客户端HTML代码: <!...POST方式可以添加键值对,也可以添加 2.GET方式,send方法传递值无效。...设置任何首部之前必须先调用open()。

3.2K121

jQuery 教程

提示: 这个 PHP 文件 (“demo_test.php”) 类似这样: <?php echo '这是个从PHP文件读取的数据。'; ?...serialize() 编码表单元素集为字符串以便提交 serializeArray() 编码表单元素集为 names 和 values 的数组 jQuery 属性 jQuery 属性 方法 描述 context...inArray() 在数组查找指定值并返回它的索引值(如果没有找到,则返回-1) $.isArray() 判断指定参数是否是一个数组 $.isEmptyObject() 检查对象是否为空(包含任何属性...创建一个 Deferred 对象之后,您可以使用以下任何方法,直接链接到通过调用一个或多个的方法创建或保存的对象。...)对象,并根据给定的参数调用任何 doneCallbacks 回调函数 deferred.resolveWith() 解决Deferred(延迟)对象,并根据给定的context 和 args 参数调用任何

17K20

JQuery快速入门

使用jQuery时,需要注意jQuery对象和DOM对象的区别,通常对于jQuery对象,会在变量前加$,如var $variable=jQuery对象;。可以通过如下方式对两者进行转化。...,而不是json提交,需要注意(通常调用接口,使用json提交;而页面的ajax请求,推荐使用form提交,会比较简单)。...jQuery,通常事件绑定是通过bind(type[,data],fn)方法实现的,其第一个参数为事件类型,非常丰富,包括blur,focus,load,resize,unload,click,dblclick...这样的机制在有时是需要的,但有时却不是期望的,那么就绪要通过event.stopPropagation()方法来禁止事件的冒泡了, 此外,jQuery,可以通过event.preventDefault...()方法来阻止元素的默认行为,常用与a链接元素和submit表单提交行为。

2.5K100

通过Ajax提交表单的数据

表单同步提交的缺点 表单同步提交后,整个页面会发生跳转,跳转到action URL所指向的地址,用户体验很差。 表单同步提交后,页面之前的状态和数据会丢失。...监听表单提交事情 jQuery,可以使用如下俩种方式,监听到表单提交事件 方法一:            $('#f1').submit(function (e) {                ...}) 阻止表单的默认提交行为 当监听到表单提交事件后,可以调用事件对象的 event.preventDefault()函数,来阻止表单提交和页面的跳转,示例代码如下:            $('...e.preventDefault()           }) 快速获取表单的数据 1.serialize()函数 为了简化表单数据的获取操作,jQuery提供了 serialize()函数,其语法格式如下...: $(selector).serialize() 好处:可以一次性获取到表单的所有数据。

2.2K20

继续死磕前端

链式调用,其实就是将多个方法一直拼接在对象后面,像链条一样调用。...当我们验证邮箱格式、手机号、身份证号时必不可少,那么 jquery 如何使用呢?...通过: event.stopPropagation(); 既然说起阻止事件冒泡了,那么我们也提一下如何阻止表单提交吧: event.preventDefault(); 实际开发其实常常将其混合使用,也就是两句话写在一起使用...,可以简单的理解为一个键值对的集合,也就是 python 的字典,键就是调用每个值的名称,值就是变量、函数、对象这些。...答:ajax可以实现局部刷新,也叫做无刷新,无刷新指的是整个页面刷新,只是局部刷新,ajax可以自己发送http请求,不用通过浏览器的地址栏,所以页面整体不会刷新,ajax获取到后台数据,更新页面显示数据的部分

2.8K10

创建联系表单页面并通过 Ajax 提交表单请求数据

3、提交表单请求 在上面的视图模板,可以看到最后额外引入了 /js/contact.js 文件,这个文件是联系表单页面需要额外用到的 JavaScript 脚本文件,目前还不存在,需要编写对应的前端处理代码.../bootstrap') 引入 jQuery 及 Bootstrap 模块,然后引入 jqBootstrapValidation 组件对表单请求数据进行简单验证,比如字段不能为空等,最后编写了一段 jQuery...4、访问联系表单页面 完成以上工作后,项目根目录下的 webpack.mix.js 添加 contact.js 编译代码: mix.js('resources/js/app.js', 'public...浏览器访问 http://localhost:9000/contact,就可以看到联系表单页面了: ?...我们可以尝试提交表单,会显示报错信息,这就是 jqBootstrapValidation 组件生效的效果: ?

2.2K50

PHP第五节

学生管理系统2.0基本功能 基本功能 添加学生功能 展示学生列表功能 删除学生功能 查看学生详情 更新学生数据 实现思路 注册功能思路: 表单设计,点击提交按钮向服务器提交表单数据 在后台获取表单提交的数据...,获取到需要用数据 把数据显示页面 点击返回按钮,可以返回到列表页 更新数据思路:更新数据的思路=先渲染 再 提交 获取要查看详情数据的id 把对应id的数据填充到修改页面 点击修改按钮,获取表单的数据...,提交给服务器 服务器更新数据 更新完成后跳转到列表页 隐藏域表单:和其他表单标签一样,只是看不到而已 <input type="hidden" name="id" value="<?...进行操作 cookie 允许服务器脚本(<em>PHP</em>脚本)<em>在</em><em>浏览器</em>端存储数据 cookie特点:<em>在</em>cookie<em>中</em>数据设置后,<em>浏览器</em>再次请求服务器指定页面时,会自动携带cookie<em>中</em>的数据到服务器,<em>在</em>服务器<em>中</em>可以获取...进行设置, cookie<em>中</em>的数据有效期,<em>不</em>设置是会话级别的, <em>浏览器</em>关闭,会话结束,数据销毁 cookie存储容量小,约4kb session <em>在</em>服务器端存储数据的容器 session容器是一个数组的形式

2.2K20

jQuery 事件(三) 事件的绑定和解绑、对象的使用、自定义事件

jQuery根据 W3C 标准规范了事件对象,所以jQuery事件回调方法获取到的事件对象是经过兼容后处理过的一个标准的跨浏览器对象 ...为防止事件冒泡到DOM树上,也就是触发的任何前辈元素上的事件处理函数 event.which:获取鼠标单击时,单击的是鼠标的哪个键 event.which 将 event.keyCode 和 event.charCode...正常来说是不可以的,但是jQuery解决了这个问题,提供了一个trigger方法来触发浏览器事件 $('#elem').trigger('click'); //绑定on的事件元素上,通过trigger...false或调用事件对象的.stopPropagation() 方法可以使事件停止冒泡 trigger事件是具有触发原生与自定义能力的,但是存在一个不可避免的问题: 事件对象event无法完美的实现...与trigger的用法是一样的,重点看不同之处: triggerHandler不会触发浏览器的默认行为,.triggerHandler( “submit” )将不会调用表单上的.submit() .trigger

4K30

jQuery的常用内容总结(三)

jQuery的常用内容总结(三) 转载请注明地址:http://www.cnblogs.com/funnyzpc/p/7571998.html 内容提要 A>表单参数序列化提交 如果没有借助jQuery...,表单可以直接提交,这样带来两个问题就是安全(get提交)或表单参数验证障碍,嗯~,可能很难懂,这样吧,我先放张图,这图是原生get提交的-> ?   ...,如果参数值提交前需要在js做处理(表单参数验证或参数拼接等等),这样直接把数据扔给后台的童鞋,肯定不太好~   额,还可以借助前两章的方法。。。可能会累死啊~,毕竟每一个表单都要单独取值。。。...嗯,以上只是提到了js的遍历,现在给大家演示下jQuery的遍历,这里需要说明的是一般对象或者数组遍历用js的遍历就好了,jQuery的遍历(each)一般是用来遍历选定的dom对象的,这里给出样例哈...window.location.reload():这个方法是可以刷新浏览器的,js可以直接写就好~ setTimeout(方法的字符串形式, 刷新的时间):此方法可以设置指定时间调用指定js方法,

79010

jQuery的常用内容总结(三)

jQuery的常用内容总结(三) 转载请注明地址:http://www.cnblogs.com/funnyzpc/p/7571998.html ---- A>表单参数序列化提交 如果没有借助jQuery...,表单可以直接提交,这样带来两个问题就是安全(get提交)或表单参数验证障碍,嗯~,可能很难懂,这样吧,我先放张图,这图是原生get提交的-> ?   ...,如果参数值提交前需要在js做处理(表单参数验证或参数拼接等等),这样直接把数据扔给后台的童鞋,肯定不太好~   额,还可以借助前两章的方法。。。可能会累死啊~,毕竟每一个表单都要单独取值。。。...嗯,以上只是提到了js的遍历,现在给大家演示下jQuery的遍历,这里需要说明的是一般对象或者数组遍历用js的遍历就好了,jQuery的遍历(each)一般是用来遍历选定的dom对象的,这里给出样例哈...window.location.reload():这个方法是可以刷新浏览器的,js可以直接写就好~ setTimeout(方法的字符串形式, 刷新的时间):此方法可以设置指定时间调用指定js方法,

79520
领券