• 关于

    jquery阻止冒泡

    的搜索结果

问题

JQuery中事件冒泡是默认的吗~?

小旋风柴进 2019-12-01 19:35:30 1020 浏览量 回答数 1

回答

阻止浏览器的默认行为 window.event?window.event.returnValue=false:e.preventDefault(); 停止事件冒泡 window.event?window.event.cancelBubble=true:e.stopPropagation(); 原生 JavaScript 中,return false;只阻止默认行为,不阻止冒泡,jQuery 中的 return false;既阻止默认行为,又阻止冒泡

茶什i 2019-12-02 03:20:57 0 浏览量 回答数 0

问题

jquery事件中的stopPropagation和stopImmediatePropagation有什么区别

小旋风柴进 2019-12-01 19:22:42 920 浏览量 回答数 1

阿里云高校特惠,助力学生创业梦!0元体验,快速入门云计算!

学生动手场景应用,快速了解并掌握云服务器的各种新奇玩法!

问题

jquery事件中的stopPropagation和stopImmediatePropagation有什么区别

a123456678 2019-12-01 20:14:10 911 浏览量 回答数 1

回答

由于事件冒泡机制,除非在事件处理过程中被主动阻止冒泡(e.stopPropagation()),否则会将事件传递到document元素上。因此,在document元素上捕获click事件,并判断触发事件的元素有没有你想要的CSS类,就可以做到,动态增加的DOM元素的相应事件也能够被正确的处理。 在旧版jQuery,对应着live()/delegate()方法;新版的jQuery,阉割掉了live和delegate方法,用On来处理。 以下摘自jQuery文档: $( selector ).live( events, data, handler ); // jQuery 1.3+ $( document ).delegate( selector, events, data, handler ); // jQuery 1.4.3+ $( document ).on( events, selector, data, handler ); // jQuery 1.7+ 所以对于楼主的要求就是: $( document ).on( "click", ".userlist", function(){ //你的事件处理过程 $('#username').val($(this).val()); }); // jQuery 1.7+

小旋风柴进 2019-12-02 02:19:09 0 浏览量 回答数 0

回答

如果是用jquery的话,可以使用event.stopPropagation()来阻止事件冒泡。 非jquery的话,你需要做点兼容。

杨冬芳 2019-12-02 02:32:33 0 浏览量 回答数 0

回答

如果是用jquery的话,可以使用event.stopPropagation()来阻止事件冒泡。非jquery的话,你需要做点兼容。

a123456678 2019-12-02 02:23:50 0 浏览量 回答数 0

回答

mouseover/mouseout 事件会冒泡,所以你在被绑定元素的子元素范围内进出时该事件消息会冒泡到父元素上于是触发你绑定在父元素上的(事件)函数。而mouseenter/mouseleave只在你绑定的元素上触发事件,进出子元素其实也会触发mouseover/mouseout事件,但会被jquery阻止传播(冒泡)。

a123456678 2019-12-02 03:03:41 0 浏览量 回答数 0

回答

two load b页面由你结构搞错了,two并没有并删除,只是b的内容放入two中而已。。 <div id="0ne">上午天气好</div> <div id="two">你你你你你</div> <script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.4.2.min.js"></script> <script> $('#two').data('html', $('#two').html()) .click(function () { $(this).load('b.html', function () { $(this).find('a').click(function (e) { e.stopPropagation();////阻止冒泡触发two的click事件 $('#two').html($('#two').data('html')); }) }) }); </script>

吴孟桥 2019-12-02 02:32:53 0 浏览量 回答数 0

回答

应该是想要这样的,阻止事件冒泡 点击里面的a的时候不触发外面的div的点击事件 <script type="text/javascript" src="./jquery-2.0.0.min.js"></script> <div style="border:1px solid #000;width:100px;height:100px" onclick="sclick()"><a id='oo'>xx</a></div> <script> function sclick(){ alert('im div'); } $('#oo').bind('click',function(event){ alert('im a'); event.stopPropagation(); }); </script>

杨冬芳 2019-12-02 02:47:07 0 浏览量 回答数 0

回答

Zepto 对象 不能自定义事件 例如执行: $({}).bind('cust', function(){}); 结果: TypeError: Object has no method 'addEventListener' 解决办法是创建一个脱离文档流的节点作为事件对象: 例如: $('').bind('cust', function(){}); Zepto 的选择器表达式: [name=value] 中 value 必须用 双引号 " or 单引号 ' 括起来 例如执行:$('[data-userid=123123123]') 结果:Error: SyntaxError: DOM Exception 12 解决办法: $('[data-userid="123123123]"') or \$("[data-userid='123123123']") 2-1.zepto 的选择器没有办法选出 \$("div[name!='abc']") 的元素 2-2.zepto获取select元素的选中option不能用类似jq的方法$('option[selected]'),因为selected属性不是css的标准属性 应该使用$('option').not(function(){ return !this.selected }) 比如:jq:$this.find('option[selected]').attr('data-v') * 1 zepto:$this.find('option').not(function() {return !this.selected}).attr('data-v') * 1 但是获取有select中含有disabled属性的元素可以用 $this.find("option:not(:disabled)") 因为disabled是标准属性 参考网址:https://github.com/madrobby/zepto/issues/503 2-3、zepto在操作dom的selected和checked属性时尽量使用prop方法 Zepto 是根据标准浏览器写的,所以对于节点尺寸的方法只提供 width() 和 height(),省去了 innerWidth(), innerHeight(),outerWidth(),outerHeight() Zepto.js: 由盒模型( box-sizing )决定 jQery: 忽略盒模型,始终返回内容区域的宽/高(不包含 padding 、 border )解决方式就是使用 .css('width') 而不是 .width() 。 3-1.边框三角形宽高的获取 假设用下面的 HTML 和 CSS 画了一个小三角形: <div class="caret" > </div > .caret { width: 0; height: 0; border-width: 0 20px 20px; border-color: transparent transparent blue; border-style: none dotted solid; } jQuery 使用 .width() 和 .css('width') 都返回 ,高度也一样; Zepto 使用 .width() 返回 ,使用 .css('width') 返回 0px 。 所以,这种场景,jQuery 使用 .outerWidth() / .outerHeight() ;Zepto 使用 .width() / .height() 。 3-2.offset() Zepto.js: 返回 top 、 left 、 width 、 height jQuery: 返回 width 、 height 3-3.隐藏元素 Zepto.js: 无法获取宽高; jQuery: 可以获取。 Zepto 的 each 方法只能遍历 数组,不能遍历 JSON 对象 Zepto 的 animate 方法参数说明 :详情点击-> zepto 中 animate 的用法 zepto 的 jsonp callback 函数名无法自定义 DOM 操作区别 jq 代码: (function($) { $(function() { var $list = $("<ul><li>jQuery 插入</li></ul>", { id: "insert-by-jquery" }); $list.appendTo($("body")); }); })(window.jQuery); jQuery 操作 ul 上的 id 不会被添加。 zepto 代码: Zepto(function($) { var $list = $("<ul><li>Zepto 插入</li></ul>", { id: "insert-by-zepto" }); $list.appendTo($("body")); }); Zepto 可以在 ul 上添加 id 。 事件触发区别 jq 代码: (function($) { $(function() { $script = $("<script />", { src: "http://cdn.amazeui.org/amazeui/1.0.1/js/amazeui.min.js", id: "ui-jquery" }); $script.appendTo($("body")); $script.on("load", function() { console.log("jQ script loaded"); }); }); })(window.jQuery); 使用 jQuery 时 load 事件的处理函数 不会 执行 zepto 代码: Zepto(function($) { $script = $("<script />", { src: "http://cdn.amazeui.org/amazeui/1.0.1/js/amazeui.js", id: "ui-zepto" }); $script.appendTo($("body")); $script.on("load", function() { console.log("zepto script loaded"); }); }); 使用 Zepto 时 load 事件的处理函数 会 执行。 zepto 阻止事件冒泡 zepto 的 slideUP 和 slidedown 事件到底部才能触发 document.addEventListener( "touchmove", function(event) { event.preventDefault(); }, false );

茶什i 2019-12-02 03:21:22 0 浏览量 回答数 0

回答

v-on 指令(可以简写为 @) 1、使用不带圆括号的形式,event 对象将被自动当做实参传入; 2、使用带圆括号的形式,我们需要使用 $event 变量显式传入 event 对象。 解析: 一、event 对象 (一)事件的 event 对象 你说你是搞前端的,那么你肯定就知道事件,知道事件,你就肯定知道 event 对象吧?各种的库、框架多少都有针对 event 对象的处理。比如 jquery,通过它内部进行一定的封装,我们开发的时候,就无需关注 event 对象的部分兼容性问题。最典型的,如果我们要阻止默认事件,在 chrome 等浏览器中,我们可能要写一个: event.preventDefault(); 而在 IE 中,我们则需要写: event.returnValue = false; 多亏了 jquery ,跨浏览器的实现,我们统一只需要写: event.preventDefault(); 兼容?jquery 内部帮我们搞定了。类似的还有比如阻止事件冒泡以以及事件绑定(addEventListener / attachEvent)等,简单到很多的后端都会使用 $('xxx').bind(...),这不是我们今天的重点,我们往下看。 (二)vue 中的 event 对象 我们知道,相比于 jquery,vue 的事件绑定可以显得更加直观和便捷,我们只需要在模板上添加一个 v-on 指令(还可以简写为 @),即可完成类似于 $('xxx').bind 的效果,少了一个利用选择器查询元素的操作。我们知道,jquery 中,event 对象会被默认当做实参传入到处理函数中,如下 $("body").bind("click", function(event) { console.log(typeof event); // object }); 这里直接就获取到了 event 对象,那么问题来了,vue 中呢? <div id="app"> <button v-on:click="click">click me</button> </div> ... var app = new Vue({ el: '#app', methods: { click(event) { console.log(typeof event); // object } } }); 这里的实现方式看起来和 jquery 是一致的啊,但是实际上,vue 比 jquery 要要复杂得多,jquery 官方也明确的说,v-on 不简单是 addEventListener 的语法糖。在 jquery 中,我们传入到 bind 方法中的回调,只能是一个函数表类型的变量或者一个匿名函数,传递的时候,还不能执行它(在后面加上一堆圆括号),否则就变成了取这一个函数的返回值作为事件回调。而我们知道,vue 的 v-on 指令接受的值可以是函数执行的形式,比如 v-on:click="click(233)" 。这里我们可以传递任何需要传递的参数,甚至可以不传递参数: <div id="app"> <button v-on:click="click()">click me</button> </div> ... var app = new Vue({ el: '#app', methods: { click(event) { console.log(typeof event); // undefined } } }); 咦?我的 event 对象呢?怎么不见了?打印看看 arguments.length 也是 0,说明这时候确实没有实参被传入进来。T_T,那我们如果既需要传递参数,又需要用到 event 对象,这个该怎么办呢? (三)$event 翻看 vue 文档,不难发现,其实我们可以通过将一个特殊变量 $event 传入到回调中解决这个问题: <div id="app"> <button v-on:click="click($event, 233)">click me</button> </div> ... var app = new Vue({ el: '#app', methods: { click(event, val) { console.log(typeof event); // object } } }); 好吧,这样看起来就正常了。 简单总结来说: 使用不带圆括号的形式,event 对象将被自动当做实参传入; 使用带圆括号的形式,我们需要使用 $event 变量显式传入 event 对象。 二、乌龙 前面都算是铺垫吧,现在真正的乌龙来了。 翻看小伙伴儿的代码,偶然看到了类似下面的代码: <div id="app"> <button v-on:click="click(233)">click me</button> </div> ... var app = new Vue({ el: '#app', methods: { click(val) { console.log(typeof event); // object } } }); 看到这一段代码,我的内心是崩溃的,丢进 chrome 里面一跑,尼玛还真可以,打印 arguments.length,也是正常的 1。尼玛!这是什么鬼?毁三观啊? 既没有传入实参,也没有接收的形参,这个 event 对象的来源,要么是上级作用链,要么。。。是全局作用域。。。全局的,不禁想到了 window.event 。再次上 MDN 确认了一下,果然,window.event,ie 和 chrome 都在 window 对象上有这样一个属性:

问问小秘 2019-12-02 03:20:58 0 浏览量 回答数 0

问题

【精品问答】前端开发必懂之JS技术二百问

茶什i 2019-12-01 22:05:04 146 浏览量 回答数 0

回答

用chrome和developerconsole看一下ajax请求的request、response,FF的firebug也可以。 看到了几个问题: 0.在submit中我都是event.preventDefault(),不知道returnfasle是不是一样。1.多个类似的问题(下面还有一个confirm,那个测试用的“aaaaa”也可以删了) varuser=$("#user").val();varpassword=$("#password").val();if(user==""){$("#confirm").text("请输入登录用户名");$("user").focus();//->$('#user').focus();2.你在ajax中用POST方式,但是在服务器用的是GET方式 3. dataType:"json"应该不是json(可以不要这行),你服务器 读取的方式是form的形式4.在js和PHP中可以直接if(str)来判断str是不是为空回复 @南漂一卒:非常感谢你的讲解!=)jQuery事件回调中可以用returnfalse;一次性禁用默认功能、阻止冒泡传播,但不推荐这种做法了~用多了框架,看原生php突然各种不适应PS:小心SQL注入 php或者mysql都是utf8了吗?php有没有bom值(如果有,要去除)。  要注意jQuery操作json是需要utf8的。把msg=="successful"改成msg.result=="successful" a似乎没有type属性,没有激活表单的submit事件,试着加入inputtype="submit"或者通过事件绑定执行提交。 引用来自“Micooz”的评论a似乎没有type属性,没有激活表单的submit事件,试着加入inputtype="submit"或者通过事件绑定执行提交。直接在后台程序打印出传入的值。。。如果有值则说明后台程序没有问题。。。。 用post提交,用GET怎么可能会接收到?

爱吃鱼的程序员 2020-06-14 15:14:36 0 浏览量 回答数 0

回答

用chrome和developer console看一下ajax请求的request、response,FF的firebug也可以。 ###### 看到了几个问题: 0. 在submit中我都是event.preventDefault(),不知道return fasle是不是一样。 1. 多个类似的问题(下面还有一个confirm,那个测试用的“aaaaa”也可以删了) var user = $("#user").val(); var password = $("#password").val(); if (user == ""){ $("#confirm").text("请输入登录用户名"); $("user").focus(); // -> $('#user').focus(); 2. 你在ajax中用POST方式,但是在服务器用的是GET方式 3. dataType:"json" 应该不是json(可以不要这行),你服务器 读取的方式是form的形式 4. 在js和PHP中可以直接if(str)来判断str是不是为空 ######回复 @南漂一卒 : 非常感谢你的讲解! =)######jQuery 事件回调中可以用 return false; 一次性 禁用默认功能、阻止冒泡传播,但不推荐这种做法了~######用多了框架,看原生php突然各种不适应######PS: 小心SQL注入###### php或者mysql都是utf8了吗?php有没有bom值(如果有,要去除)。  要注意jQuery操作json是需要utf8的。 ######把msg =="successful" 改成 msg.result =="successful" ######a似乎没有type属性,没有激活表单的submit事件,试着加入input type="submit" 或者 通过事件绑定执行提交。###### 引用来自“Micooz”的评论a似乎没有type属性,没有激活表单的submit事件,试着加入input type="submit" 或者 通过事件绑定执行提交。 +1######直接在后台程序打印出传入的值。。。如果有值则说明后台程序没有问题。。。。 ######用post提交,用GET怎么可能会接收到?

kun坤 2020-06-06 18:15:11 0 浏览量 回答数 0

回答

用chrome和developer console看一下ajax请求的request、response,FF的firebug也可以。 ###### 看到了几个问题: 0. 在submit中我都是event.preventDefault(),不知道return fasle是不是一样。 1. 多个类似的问题(下面还有一个confirm,那个测试用的“aaaaa”也可以删了) var user = $("#user").val(); var password = $("#password").val(); if (user == ""){ $("#confirm").text("请输入登录用户名"); $("user").focus(); // -> $('#user').focus(); 2. 你在ajax中用POST方式,但是在服务器用的是GET方式 3. dataType:"json" 应该不是json(可以不要这行),你服务器 读取的方式是form的形式 4. 在js和PHP中可以直接if(str)来判断str是不是为空 ######回复 @南漂一卒 : 非常感谢你的讲解! =)######jQuery 事件回调中可以用 return false; 一次性 禁用默认功能、阻止冒泡传播,但不推荐这种做法了~######用多了框架,看原生php突然各种不适应######PS: 小心SQL注入###### php或者mysql都是utf8了吗?php有没有bom值(如果有,要去除)。  要注意jQuery操作json是需要utf8的。 ######把msg =="successful" 改成 msg.result =="successful" ######a似乎没有type属性,没有激活表单的submit事件,试着加入input type="submit" 或者 通过事件绑定执行提交。###### 引用来自“Micooz”的评论a似乎没有type属性,没有激活表单的submit事件,试着加入input type="submit" 或者 通过事件绑定执行提交。 +1######直接在后台程序打印出传入的值。。。如果有值则说明后台程序没有问题。。。。 ######用post提交,用GET怎么可能会接收到?

kun坤 2020-05-27 11:51:08 0 浏览量 回答数 0

问题

【精品问答】前端实战100例之JavaScript篇

珍宝珠 2020-02-14 15:10:56 1456 浏览量 回答数 1

回答

" 用chrome和developer console看一下ajax请求的request、response,FF的firebug也可以。 ###### 看到了几个问题: 0. 在submit中我都是event.preventDefault(),不知道return fasle是不是一样。 1. 多个类似的问题(下面还有一个confirm,那个测试用的“aaaaa”也可以删了) var user = $("#user").val(); var password = $("#password").val(); if (user == ""){ $("#confirm").text("请输入登录用户名"); $("user").focus(); // -> $('#user').focus(); 2. 你在ajax中用POST方式,但是在服务器用的是GET方式 3. dataType:"json" 应该不是json(可以不要这行),你服务器 读取的方式是form的形式 4. 在js和PHP中可以直接if(str)来判断str是不是为空 ######回复 @南漂一卒 : 非常感谢你的讲解! =)######jQuery 事件回调中可以用 return false; 一次性 禁用默认功能、阻止冒泡传播,但不推荐这种做法了~######用多了框架,看原生php突然各种不适应######PS: 小心SQL注入###### php或者mysql都是utf8了吗?php有没有bom值(如果有,要去除)。  要注意jQuery操作json是需要utf8的。 ######把msg =="successful" 改成 msg.result =="successful" ######a似乎没有type属性,没有激活表单的submit事件,试着加入input type="submit" 或者 通过事件绑定执行提交。###### 引用来自“Micooz”的评论a似乎没有type属性,没有激活表单的submit事件,试着加入input type="submit" 或者 通过事件绑定执行提交。 +1######直接在后台程序打印出传入的值。。。如果有值则说明后台程序没有问题。。。。 ######用post提交,用GET怎么可能会接收到?" ![image.png](https://ucc.alicdn.com/pic/developer-ecology/129a5c24ba2342df9034c9a9c9cb2af0.png)

montos 2020-05-30 11:27:53 0 浏览量 回答数 0
阿里云大学 云服务器ECS com域名 网站域名whois查询 开发者平台 小程序定制 小程序开发 国内短信套餐包 开发者技术与产品 云数据库 图像识别 开发者问答 阿里云建站 阿里云备案 云市场 万网 阿里云帮助文档 免费套餐 开发者工具 企业信息查询 小程序开发制作 视频内容分析 企业网站制作 视频集锦 代理记账服务 2020阿里巴巴研发效能峰会 企业建站模板 云效成长地图 高端建站