[jQuery]event.stopPropagation()报错

最新推荐文章于 2024-04-23 15:57:32 发布
原创 最新推荐文章于 2024-04-23 15:57:32 发布 · 5.8k 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#jquery #function #浏览器 #文档 #ie

本文探讨了在使用jQuery处理事件时如何正确阻止事件冒泡。指出若未将event参数传递给事件处理函数，则默认使用window.event，这可能导致兼容性问题。推荐在定义事件处理方法时明确使用event参数。

使用jQuery给一个事件加处理方法时，为了阻止一个事件向上冒泡，使用了event.stopPropagation()，但在IE下却报对象不支持此属性或方法的错误（IE下是event. cancelBubble=true），jQuery不是兼容各浏览器吗？

后来看了下jQuery的官方文档后，原来在使用event的时候，必须在事件处理方法中加入参数event，否则这个event为 window.event，而不是jQuery中的event。所以在jQuery定义事件处理方法时，最好加上参数event，如下：

$('#btn').click(function(event){})  //推荐
$('#btn').click(function(){})  //不推荐

JQuery知识点
胖大xian
01-14 353
JQuery一、jquery介绍二、jquery加载三、jquery选择器四、jquery样式操作五、绑定click事件六、jquery特殊效果七、jquery链式调用八、jquery动画九、尺寸相关、滚动事件十、jquery属性操作十一、jquery循环十二、jquery事件十三、事件冒泡十四、事件委托十五、jquery元素节点操作十六、滚轮事件与函数节流十七、json十八、ajax与jsonp十九、本地存储二十、jqueryUI 一、jquery介绍 jQuery是目前使用最广泛的javascript函
手势识别与事件库 Touch.js若干问题及解决方法
猫猫，很优雅的博客
07-09 2628
Touch.js是移动设备上的手势识别与事件库, 由百度云Clouda团队维护，也是在百度内部广泛使用的开发工具. Touch.js的代码已托管于github并开源，希望能帮助国内更多的开发者学习和开发出优秀的App产品. Touch.js手势库专为移动设备设计, 请在Webkit内核浏览器中使用.极速CDNExamples//swipe example touch.on('.target',
【报错】v-on handler: &quot；TypeError: $event.stopPropagation is not a function
Effotzjw_小白慢慢踏全栈
02-21 2739
在vue中，对input框直接使用@click去触发事件，是无法达到想要的效果，也无法触发事件，需要加上native才能实现input框的点击事件触发，即@click.native=“XXX”在input上写了@click，想阻止冒泡，但是一直报不存在的问题。
uniapp使用阻止时间无效，报错stopPropagation()方法无效
m0_61629497的博客
03-29 667
使用：@click.native.stop。
关于bootstrap-select赋值时候报错： e.stopPropagation is not a function
热门推荐
键圣的博客
11-22 1万+
场景是：使用$('#vendorId').selectpicker('val',data.vendorId);给单选框赋值的时候js报错 然后不能代码更改单选框的值。 究其原因是因为selectpicker 没能完整的初始化， 现在添加代码： console.log("默认选中"+$('#vendorId').val()); $('#vendorId').selectpicke
event.stop();报错
05-07
例如，在jQuery中可能需要使用event.originalEvent.stopPropagation()。 另外，现代浏览器为了优化滚动性能，将touchmove事件默认设置为被动监听器（passive listeners），在这种情况下，调用preventDefault()会被...
text/x-generic addaccount.js ( ASCII text, with CRLF line terminators ) // Keep your original radio toggle function function toggleRadio(event, element) { //console.log('Radio toggle clicked', element); event.stopPropagation(); // Prevents <summary> toggle const details = element.closest('details'); //console.log('Found parent details for radio:', details); details.classList.toggle('digages-onboard-addacnt-checked'); // Toggle only the clicked item //console.log('Toggled checked class on details'); } // Optional: Explicit chevron toggle document.querySelectorAll('.digages-onboard-addacnt-chevron').forEach(chevron => { chevron.addEventListener('click', (event) => { //console.log('Chevron clicked', chevron); const details = chevron.closest('details'); //console.log('Toggling details open state from', details.open, 'to', !details.open); details.open = !details.open; event.stopPropagation(); // Added to prevent event bubbling }); }); // Function to ensure only one details is open and has the checked class document.addEventListener('DOMContentLoaded', function() { //console.log('DOM fully loaded'); const allDetails = document.querySelectorAll('details'); //console.log('Found', allDetails.length, 'details elements:', allDetails); // Add event listeners for handling accordion behavior allDetails.forEach((details, index) => { //console.log('Setting up listeners for details #', index); // Track the toggle event which fires when open state changes details.addEventListener('toggle', function(event) { //console.log('Toggle event fired on details #', index); //console.log('Current open state:', details.open); if (details.open) { //console.log('This details was opened, closing others'); // Close all other details and remove checked class allDetails.forEach((otherDetails, otherIndex) => { if (otherDetails !== details) { if (otherDetails.open) { //console.log('Closing details #', otherIndex); otherDetails.open = false; } // Remove checked class from all other details if (otherDetails.classList.contains('digages-onboard-addacnt-checked')) { //console.log('Removing checked class from details #', otherIndex); otherDetails.classList.remove('digages-onboard-addacnt-checked'); } } }); // Add checked class to the current details if it doesn't have it if (!details.classList.contains('digages-onboard-addacnt-checked')) { //console.log('Adding checked class to details #', index); details.classList.add('digages-onboard-addacnt-checked'); } } }); }); }); // Add click listener to document to ensure proper class management on summary clicks document.addEventListener('click', function(event) { const clickedSummary = event.target.closest('summary'); if (clickedSummary) { //console.log('Summary element clicked'); const clickedDetails = clickedSummary.closest('details'); // Wait a tiny bit for the default toggle behavior to complete setTimeout(function() { const allDetails = document.querySelectorAll('details'); allDetails.forEach((details) => { // If details is open but not the clicked one, close it and remove class if (details !== clickedDetails && details.open) { details.open = false; details.classList.remove('digages-onboard-addacnt-checked'); } // If it's the clicked details and it's open, ensure it has the class if (details === clickedDetails && details.open) { details.classList.add('digages-onboard-addacnt-checked'); } }); }, 10); } });
最新发布
07-09
event.stopPropagation(); // Prevents <summary> toggle const details = element.closest('details'); details.classList.toggle('digages-onboard-addacnt-checked'); } ``` --- ### 2. 可选的 Chevron...
JavaScript和jQuery的概述《干货》
2301_79258776的博客
04-23 1531
学会javaScript和jQuery的灵活运用！
uniapp中使用.stop报错 无法使用stopPropagation？
g1437353759的博客
04-13 2376
在开发中我们常常会遇到要的问题，加个.stop就好了。但是在组件上阻止事件冒泡会报错：$event.stoppropagation is not a function这是因为当事件添加到上时，会变成自定义事件，如果想要触发事件的回掉函数，则必须子组件内的$emit调用才可以。
vue或uni中.stop阻止事件冒泡报错的问题（修饰符.native）
zhangjiayu88的博客
04-02 6530
在开发中我们常常会遇到要阻止事件冒泡的问题，加个.stop就好了。但是在组件上阻止事件冒泡会报错：$event.stoppropagation is not a function。这是因为当事件添加到Vue组件上时，会变成自定义事件，如果想要触发事件的回掉函数，则必须子组件内的$emit调用才可以。1.native修饰符可以让父组件接收到原生事件, 否则只能接收自定义事件(通过子组件$emit触发)；2. native修饰符只能用在组件上, 不能用在原生标签上。，就可以解决这个报错问题。
stopPropagation()
weixin_30394333的博客
10-17 154
定义和用法 不再派发事件。 终止事件在传播过程的捕获、目标处理或起泡阶段进一步传播。调用该方法后，该节点上处理该事件的处理程序将被调用，事件不再被分派到其他节点。 实例 <html> <head> <title>stopPropagation测试</title> <style type="text/css"...
阻止向上冒泡stopPropagation()，另一种写法
开源世界
04-10 319
之前看的都是直接给元素添加click事件，然后在click事件里面写。如下： $(“span”).click(function(event){ event.stopPropagation(); alert(“The span element was clicked.”); }); 但是如果想要用οnclick=xxx()来调用点击事件时，直接写 event.stopPropagation(); 会报错：Typeerror：Cannot read property ‘stopPropagation’ of u
stopPropagation的解释
NET情歌专栏
02-03 1393
if(event!=undefined){         event.stopPropagation();//事件冒泡阶段，该事件执行完毕后，调用stopPropagation阻止事件的分发。不会再执行父容器及以上容器中元素的事件。  }
jQuery event.stopPropagation() 方法
飞翔的熊blabla
01-15 682
event.stopPropagation() 方法阻止事件冒泡到父元素，阻止任何父事件处理程序被执行。 $("span").click(function(event){ event.stopPropagation(); alert("The span element was clicked."); }); $("p").click(function(event){ alert("The p ...
layui upload； 限制上传个数打断提交
sani_x的博客
04-20 713
Before回调中使用stopPropagation(); 强行打断进程 layui.use('upload', function() { var upload = layui.upload; //执行实例 var uploadInst = upload.render({ elem: '#uploade', //绑定元素 url: '/upload', //上传接口 size: 1024 * 2, accept: 'images', acceptMime: 'image/jp
layui中upload.render阻止文件上传
qq_37251530的博客
01-21 8922
layui里upload.render 方法阻止文件上传 upload.render文件上传时，如果需要在上传文件前，添加判定。如果不符合则终止上传，根据layui 文档 在 before 方法里 return false 就可以，但是很多人加了 都没有效果，在网上找了两种方法 第一种：修改upload.js文件 将 y=function（）{} 中的方法换成如下的方法， retur...
layui判断图片尺寸并终止上传
凡心所向，素履以往，生如逆旅，一苇以航。
05-26 835
layui判断图片尺寸并终止上传 //普通图片上传 var uploadInst = upload.render({ elem: '#upload_avatar' , url: '/upload' //改成您自己的上传接口 , auto: false // 要是用choose时必须设置不自动上传 , choose: function (obj) { //预读本地文件示例，不支持ie8 obj.preview(func
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值