当应用于锚内的文本框时,jQuery stopPropagation无法正常工作 - 腾讯云开发者社区 - 腾讯云

开发者社区

文档建议反馈控制台

文章/答案/技术大牛

发布

js事件防止冒泡

与.target类似，这种方法也是一种纯JavaScript特性，但在跨浏览器的环境中则无法安全地使用。只是，仅仅要我们通过jQuery来注冊全部的事件处理程序。就能够放心地使用这种方法。以下。...单击样式转换器的其它地方则能够折叠和扩展整个区域。 3. 默认操作假设我们把单击事件处理程序注冊到一个锚元素，而不是一个外层的上，那么就要面对另外一个问题：当用户单击链接时。...这样的行为与我们讨论的事件处理程序不是同一个概念，它是单击锚元素的默认操作。类似地，当用户在编辑完表单后按下回车键时。会触发表单的submit事件，在此事件发生后，表单提交才会真正发生。...假设我们不希望运行这样的默认操作。那么在事件对象上调用.stopPropagation()方法也无济于事，由于默认操作不是在正常的事件传播流中发生的。...这是对在事件对象上同一时候调用.stopPropagation()和.preventDefault()的一种简写方式。

3.1K4 0

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

看如下实例： (1)把单击事件处理程序注册到一个锚元素，而不是一个外层的上，那么就要面对另外一个问题：当用户单击链接时，浏览器会加载一个新页面。...(2)当用户在编辑完表单后按下回车键时，会触发表单的submit事件，在此事件发生后，表单提交才会真正发生。这种行为与我们讨论的事件处理程序不是同一个概念，它是单击标签元素的默认操作。...如果我们不希望执行这种默认操作，那么在事件对象上调用.stopPropagation()方法也无济于事，因为默认操作不是在正常的事件传播流中发生的。...当Event 对象的 cancelable为false时，表示没有默认行为，这时即使有默认行为，调用preventDefault也是不会起作用的。...，而是用jQuery的话则既阻止默认行为又防止对象冒泡。

2.9K6 0

您找到你想要的搜索结果了吗？

是的

没有找到

jQuery 事件

什么是事件页面对不同访问者的响应叫做事件。事件处理程序指的是当 HTML 中发生某些事件时所调用的方法。... 移除事件 off() 方法通常用于移除通过 on() 方法添加的事件处理程序。...该方法给 API 带来很多便利，我们推荐使用该方法，它简化了 jQuery 代码库。注意：如需移除指定的事件处理程序，当事件处理程序被添加时，选择器字符串必须匹配 on() 方法传递的参数。...$(selector).off(event,selector,function(eventObj),map) 事件对象的属性和方法方法描述 event.currentTarget 在事件冒泡阶段内的当前...如果点击文本框，文本框颜色会变化。

3.5K7 0

04-老马jQuery教程-DOM节点操作及位置和大小

语法结构： jQuery(html, [props]) 参数: html:用于动态创建DOM元素的HTML标记字符串，注意标签尽量闭合。...props:用于附加到新创建元素上的属性、事件和方法返回值：返回新创建标签的jQuery包装对象 // jq的 appendTo，类似DOM的appendTo方法 $("Hello的元素包含文本时无法使用这个函数。因此，如果要添加文本应该在包裹完成之后再行添加。...示例 // 把所有段落内的每个子内容加粗 $("p").wrapInner(""); // 把所有段落内的每个子内容加粗 $("p").wrapInner(document.createElement...> $(function(){ // 当文本框按下按键时处理 $('.txt-lb').on('keydown', function(e) {

6.6K0 0

HTML-CSS基础学习

>文本锚链接文章太长,通过创建锚点方便跳转要指定锚点，如：目录锚点跳转到锚点电子邮件链接 <a href=...元素提交表单时H5会自动检查输入格式是否正常邮箱文本框 url文本框数值文本框用于块元素，内联元素使用时，需要设置元素的height或width或设置position属性为absolute或设置display属性为block ::first-line 设置元素内的第一行字符的样式...tab-size 制表格的长度 overflow-wrap 当内容超过指定容器的边界时是否断行 word-break 对象内文本的字内换行行为，默认normal，允许字内换行 text-align...AJAX jQuery

5.6K3 0

jquery中使用event.stopPropagation()阻止事件冒泡

因为按钮在文档内，所以会产生事件冒泡使得在点按钮打开菜单时无法正常执行。所以我们需要阻止事件冒泡。例子代码如下： <!...green;} span{display:block;width:100px;height:30px;background-color:skyblue;} jquery.js...script> 无标题文档按我消失的盒子... //点span显示盒子 $("span").click( function(){ event.stopPropagation()//阻止事件冒泡 $(".box")

1K13 0

JQuery-命令速查-CheatSheet

filter 和 find 的区别结论 submit a form in ajax success callback-AJAX 成功时回调函数中提交 Form API JQuery-Error...动态添加表单获取 Jquery 对象数组中的所有文字 Jquery 对象的属性转为数组 Query select attributes into an array 页面控制滚动到对应位置...var result = $("div").filter(".rain"); alert(result .html() ); 结果: 测试 2 结论 find() 会在 div 元素内寻找...这是一个简单的 GET 请求功能以取代复杂 .ajax 。请求成功时可调用回调函数。如果需要在出错时执行函数，请使用 .ajax。参数 Attr Exp url 必需。...规定预计的服务器响应的数据类型。默认地，jQuery 将智能判断。

10.4K3 0

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

停止事件冒泡停止时间冒泡可以阻止事件中其他对象的事件处理函数被执行.在jquery中提供了stopPropagation()方法来阻止冒泡事件....; event.stopPropagation();//停止冒泡事件 }) 当单击span元素时,只会触发span元素上的click事件,而不会触发 div元素和body元素的click事件....$("#msg").html("文本框的值不能为空....jquery对其进行了封装,使之能兼容各大浏览器 (3)event.stopPropagation()方法阻止事件的冒泡.js真符合W3C规范的stopPropagation()方法在IE浏览器中无效...上某一台计算机或计算机组的名称，用于在数据传输时标识计算机的电子方位（有时也指地理位置）。

9.4K2 0

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

在前端开发工作中，由于浏览器兼容性等问题，我们会经常用到“停止事件冒泡”和“阻止浏览器默认行为”。...) 3 //因此它支持W3C的stopPropagation()方法 4 e.stopPropagation(); 5 else 6 //否则，我们需要使用IE的方式来取消事件冒泡 7 window.event.cancelBubble...return false; } 但是在使用return false时必须注意： 1、jQuery有自己的事件处理层，也对处理程序做了封装，如果事件处理程序返回false，事件冒泡和浏览器默认事件都会被阻止...注意：有一些浏览器行为是在事件处理程序执行前发生的，也就是说这些默认行为是无法取消的，如：在大部分浏览器上鼠标移到一个超链接上超链接的样式会发生改变，这个动作是发生在focus事件之前的，是focus...事件处理程序中无法取消的。

5.9K12 0

【Java 进阶篇】深入理解 JQuery 事件绑定：标准方式

JQuery 的事件绑定机制有两种主要方式：标准方式和简化方式。本篇博客将聚焦于标准方式，通过生动的例子带你逐步掌握这一强大的前端技能。准备工作在开始之前，确保你的项目中已经引入了 JQuery。...当按钮被点击时，回调函数内的代码就会执行，弹出一个提示框。标准方式：事件代理有时候，我们需要在动态生成的元素上绑定事件，这时候事件代理就派上用场了。...off 方法就是用于解绑事件的工具，它可以根据事件类型、选择器、回调函数等信息来进行解绑。 JQuery 中，分别使用 event.preventDefault() 和 event.stopPropagation() 来实现这两个目的。时不会跳转到指定的网站，而是触发了我们定义的回调函数。标准方式：事件委托的应用事件委托是一种优化性能的方式，特别适用于需要大量事件绑定的情况。

5204 0

微信自带浏览器被输入法阻挡文本框的 jQuery 解决方法 by FungLeo

微信自带浏览器被输入法阻挡文本框的 jQuery 解决方法 by FungLeo 前言做好了项目之后,在各种浏览器里面测试,都没有问题.很高兴,交付后端使用.然而发现在微信自带浏览器里面,却是出现了问题...我的页面是一堆文本框,需要用户输入,当页面比较长的时候,在下面的文本框会被输入法给挡住…我勒个去....: 机型表现形式iphone6看上去正常,但视窗高度并没有改变.页面可以滑动iphone5不正常,能滑动,但默认没有滑动到当前input红米note正常,没有问题小米4/5不正常,不能滑动,无法使用与手机操作系统和微信版本都有关系...思路项目已经做好了,我现在只能打个补丁上去,通篇的解决这个该死的兼容性问题.项目中采用了jquery2版本.因此,这个补丁使用jquery语法来写....,解决了一下这个问题,代码如下: // 用于解决微信自带浏览器输入法遮挡文本框的处理 $(function(){ if (is_weixn()){ var inp = $("input

1.1K3 0

常见的兼容性问题

，当input或者textarea设置了该属性后，该值的内容将作为灰字提示显示在文本框中，当文本框获得焦点或输入内容时，提示文字消失。...此外，在jQuery中使用return false会同时阻止默认行为与事件传播，通常也会封装一个方法来实现默认行为的阻止。...handler.stopPropagation = function(event) { event = event || window.event; if (event.stopPropagation...invalid date，这主要是因为早期浏览器不支持表达日期的-，而/才是被广泛支持的，所以在处理早期浏览器的兼容性时需要将-替换为/。...lt 小于运算符 lte 小于或等于运算符 gt 大于运算符 gte 大于或等于运算符 & AND运算符 | OR运算符 () 子表达式运算符用于与布尔运算符创建更复杂的表达式

2K1 0

js拖拽上传图片

jquery的ajax请求。...当我们使用表单上传文件时，我们来查看他的Request headers，如下图： ?...发现在 multipart/form-data 后面有boundary以及一串字符，这是分界符，后面的一堆字符串是随机生成的，目的是防止上传文件中出现分界符导致服务器无法正确识别文件起始位置。...这里的不同也就是指前者在发送的每个字段内容之间必须要使用分界符来隔开，比如文件的内容和文本的内容就需要分隔开，不然服务器就没有办法正常的解析文件，而后者 post 当然就没有分界符直接以 name =...而我们在 ajax 中 contentType 设置为 false 是为了避免 JQuery 对其操作，从而失去分界符，而使服务器不能正常解析文件。 3、效果 ?

21.7K3 0

100个最常问的JavaScript面试问答-第2部分（共10部分）

它是从HTML文档建模的树状结构。 DOM用于交互和修改DOM结构或特定的元素或节点。用于选择元素以更新元素内容的方法。...当event.stopPropagation()方法停止事件的传播时。它阻止了事件在冒泡或捕获阶段发生。问题18.如何知道是否在元素中使用了event.preventDefault()方法？...答：每当从某个内部范围内访问在当前范围之外定义的变量时，都会创建Closures。它使我们能够从内部函数访问外部函数的范围。...换句话说，闭包是与函数相关的本地声明的变量，并在相关函数返回时保留在内存中。闭包包含创建闭包时在范围内的所有局部变量。在JavaScript中，每次创建函数时都会创建闭包。

1.3K3 1

jquery 常用方法总结

jQuery顶级对象缩写$ window.jQuery window.$ 第一部分，找对象其本选择器 $("#id") $(".class") ...对象，只是在内存中加到对像内 .append($link);向后追加 appendTo将一个元素移动到另一个元素的最后面 prepend向前追加 ...funtion(){}) 阻止事件冒泡关于哪些事件冒泡，我没有记，反正，出问题了，你就用下面这个就OK，没必要记住 $("#d1").click(function(e){ e.stopPropagation...enterfn，当鼠标离开时执行leavefn toggle(fn1,fn2) 当鼠标第一次点击时执行fn1，第二次点击执行fn2，以后依次执行事件参数 pageX、pageY...失去焦点 [搜索文本框效果] 获取对像的宽度和高度 var width = $(对像).width(); var height = $(对像).height();

1.9K0 0

「jQuery」基础 - 03

缺点: 普通的事件注册不能做事件委托，且无法实现事件解绑，需要借助其他方法。语法 register 演示代码 <!...事件处理因为普通注册事件方法的不足，jQuery又开发了多个处理方法，重点讲解如下： on()：用于事件绑定，目前最好用的事件绑定方法 off()：事件解绑 trigger() 、triggerHandler...案例：发布微博案例点击发布按钮，动态创建一个小li，放入文本框的内容和删除按钮，并且添加到ul 中。点击的删除按钮，可以删除当前的微博留言。的li是JS动态创建的，在页面加载时Docoment中并没有此元素，选择器并不能选取。...jQuery 多库共存实际开发中，很多项目连续开发十多年，jQuery版本不断更新，最初的 jQuery 版本无法满足需求，这时就需要保证在旧有版本正常运行的情况下，新的功能使用新的jQuery版本实现

3.4K3 0

一次关于js事件出发机制反常的解决记录

起因：正常情况下我点击s2时是先弹出我是children，再弹出我是father，但是却出现了先弹出我是father，后弹出我是children的情况，这种情况是在和安卓app交互的h5页面中出现的，本地测试没有问题...如果是jQuery的bind()和delegate()绑定，也是存在对应的解绑函数用以清除注册事件，比如unbind()和undelegate()。...jQuery的话则既阻止默认行为又防止对象冒泡。...e.stopPropagation(); //因此它支持W3C的stopPropagation()方法 }else{ window.event.cancelBubble...} return false; } 最后的解决方法：让我们回顾一下最初的问题，可能部分浏览器把事件的useCapture默认为true，导致点击子元素时父元素的事件先响应了，于是我的办法是在父元素的事件里进行判断

1.7K5 0

前端学习资料整理

当应用足够复杂时才能体会到它的好处，虽然在一般应用场景下你可能不会意识到它的存在，也不会影响你开始使用 React，你只要先知道有这么个概念。...（2）、标准模式的排版和JS运作模式都是以该浏览器支持的最高标准运行。在兼容模式中，页面以宽松的向后兼容的方式显示,模拟老式浏览器的行为以防止站点无法工作。 HTML5 为什么只需要写用于定义RSS, 定义rel连接属性等作用；而@import是CSS提供的，只能用于加载CSS; （2）页面被加载的时，link会同时被加载，而@...HTML5的离线储存怎么使用，工作原理能不能解释一下？在用户没有与因特网连接时，可以正常访问站点或应用，在用户与因特网连接时，更新用户机器上的缓存文件。...优雅降级：Web站点在所有新式浏览器中都能正常工作，如果用户使用的是老式浏览器，则代码会针对旧版本的IE进行降级处理了,使之在旧式浏览器上以某种形式降级体验却不至于完全不能用。

3.8K2 0

WEB API教程

例如：name=zs fragment:信息片断字符串，锚点. location有哪些成员？...微软在网页技术上加入了不少专属事物，既有VBScript、ActiveX、以及微软自家的DHTML格式等，使不少网页使用非微软平台及浏览器无法正常显示。DOM即是当时蕴酿出来的杰作。...checked 复选框选中属性 selected 下拉菜单选中属性案例给文本框赋值，获取文本框的值点击按钮禁用文本框搜索文本框检测用户名是否是3-6位，密码是否是6-8位，如果不满足要求高亮显示文本框...() 取消默认行为案例跟着鼠标飞的天使获取鼠标在div内的坐标阻止事件传播的方式标准方式 event.stopPropagation(); IE低版本 event.cancelBubble =...正则表达式简介什么是正则表达式正则表达式：用于匹配规律规则的表达式，正则表达式最初是科学家对人类神经系统的工作原理的早期研究，现在在编程语言中有广泛的应用。

3481 0

(一)熟练HTML5+CSS3，每天复习一遍

标签，是HTML文档标签内的一个辅助性标签，meta标签分为2个重要的属性：name和http-equiv，通常用于能够优化页面被搜索的可能性。...表明了在页面中引入一个.style的样式表。 script标签用于定义页面内的脚本。 titl标题标签，body体标签....一般目前大部分显示器的分辨率是1024px x 768px，图片分辨率定义是用于量度位图图像内数据量多少的一个参数。...date类型的Input元素是专门用于输入日期的文本框，默认为带日期选择器的输入框。...required特性，那么这项的值不能为空，否则无法提交表单。

3.4K3 0

点击加载更多

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭