微信小程序，关于navigator子元素绑定事件，阻止navigator跳转

最新推荐文章于 2024-04-01 16:03:19 发布
最新推荐文章于 2024-04-01 16:03:19 发布
阅读量1.8w 收藏 1
点赞数
分类专栏： 微信小程序 文章标签： 微信小程序 阻止navigator跳转 阻止标签默认行为 阻止冒泡
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/cxYuan_0921/article/details/54092126
版权



第二个item里边，switch切换时，会自动触发navigator跳转，找了好久也没有找到类似于e.preventDefault方法，想了一个办法， 如图，第一个item，那就是，把switch拿出来，和navigator为兄弟元素，然后把switch定位，点击时，就不会触发navigator跳转行为，完美解决！




cxYuan_0921
关注
专栏目录
微信小程序实例：move事件导致navigator组件和tap事件无效
草灯的专栏
01-11 6603
今天，微信小程序终于发布了，激动的同时也在加紧最后公司项目的测试，结果发现了一个问题，就是在使用catch绑定move事件的时候，无法触发navigator组件的url和tap事件。
微信小程序间使用navigator跳转传值问题实例分析
10-15
`navigator`组件是微信小程序提供的一种导航功能，用于实现从一个小程序页面跳转到另一个页面或小程序。本篇文章将详细探讨如何利用`navigator`组件进行跳转并传递参数。 1. **额外数据（extra-data）的构建** - `...
【微信小程序】如何阻止事件冒泡到父级的navigator url跳转
'Ablaze 的专栏
06-07 5968
最近在做一个爬虫订阅项目时遇到一个问题： 当我点击switch按钮改变订阅状态时如何不触发父级的navigator的url跳转 下图是爬虫项目部分截图 经过尝试传统的阻止事件冒泡未成功后终于找到了catchtap这个方法 请看下图演示（因不方便所以随便打开一个小程序项目测试） 可以看到，catchcap绑定的那个方法我还没有写，如果你注意console控制台报错的话 但是，如果...
微信小程序—点击navigator中的子元素同时，防止跳转
阵雨的博客
12-13 7611
前期代码： <navigator hover-class="none" url=''> <view>内容</view> <view bindtap='telChange'>拨打电话</view> </navigator> telChange: function (e) { wx.makeP...
微信小程序中按钮绑定点击事件（bindtap）实现页面跳转（redirectTo、navigataTo），并且进行数据传递( url: '../logs/logs?id=1')
啊哈嗯嗯的博客
04-03 8290
定义两个页面： 绑定点击事件后代码： 实现跳转有两种方法： 1、navigateTo //实现登录跳转 login:function(){ wx.navigateTo({ url: '../logs/logs', //跳转页面路径 }) } 2、redirectTo //实现登录跳转 login:function(){ wx.r...
button中嵌套navigator为啥不能跳转
weixin_46051988的博客
05-26 644
把navigator放在button里面
微信小程序怎么阻止navigator向父级元素冒泡？
mini_1251861209的博客
09-26 1474
父元素是bindtap，navigator加个catchtap="emptyFunc" emptyFunc: function(){} emptyFunc是一个空方法，可以阻止navigator向上冒泡。 其实原理就是把navigator当成普通的元素，然后加上catchtap之后就会阻止冒泡，但是里面一定要有一个方法，空的也行，不加的话就不会生效 ...
微信小程序实现跳转的几种方式总结（推荐）
10-17
在学习和应用微信小程序页面跳转时，开发者需要注意小程序跳转路径的正确性，以及跳转事件绑定的准确性。确保目标页面已经正确地配置在小程序的目录结构中，并且在需要进行页面跳转的地方正确地使用了相关方法或组件...
微信小程序按钮点击跳转页面详解
11-28
除了`navigateTo`外，微信小程序还提供了其他页面跳转方法，如`redirectTo`（无历史记录的跳转）、`switchTab`（跳转到 tabBar 页面）、`reLaunch`（关闭所有页面，打开到应用内的某个页面）和`navigator`组件（轻...
微信小程序源码精选250套
10-30
小程序的事件绑定是指将事件处理函数绑定到小程序的组件上。例如，在上面的代码中，使用了bindtap事件来绑定一个点击事件到一个组件上。 知识点6：小程序的数据绑定 小程序的数据绑定是指将数据绑定到小程序的组件...
小程序navigator不跳转
南河的南的博客
06-22 1524
解决微信小程序navigator不跳转问题
小程序绑定事件跳转的三种方法
祈澈菇凉
12-09 5167
1:wx.navigateTo ;保留当前页面（有返回按钮) 效果： demo示例： wxml: &lt;view bindtap="bindViewTap" class="up"&gt; 我要绑定事件来跳转了 &lt;/view&gt; js: Page({ data: { }, //事件处理函数 bindVie...
微信小程序navigator
weixin_30788619的博客
09-30 129
如果是小程序自身页面的跳转 <navigator open-type="navigate" target="self" url="targetUrl></navigator> 如果是小程序A跳小程序B的页面 <navigator open-type="navigate" target="miniProgram" app-id="wxAppId"path="/...
小学期微信小程序实训篇3_双向绑定、图像image及轮播swiper、导航标签navigator、自定义组件及传值
xiaosi的博客
05-15 1172
目录 双向绑定、 图像image及轮播swiper、 导航标签navigator、 自定义组件 一、双向绑定 概念 方向一: js中data里定义的值 ——> 标签中的值发生改变； 方向二：标签中的值输入——> 改变到了js中data里定义的值； 使用model:value绑定 js代码 Page({ data: { inputValue: "我是没有感情的测试机器" } }) wxml代码 <!-- model:value="{{inputVa
小程序bindtap、catchtap、navigator点击事件无反应
热门推荐
FrancisBingo的博客
01-10 1万+
网上比较普遍的说法是：app.json 的page 注册页面的顺序导致的。 还有一个很刁钻的原因：页面的点击事件名称相同，就算是两个不同的页面，但如果两个页面的点击事件名称重复，也会导致点击事件失效。页面的其他错误也可能导致。 如果以上问题都不是你遇到的那请往下看
小程序项目开发过程中遇到的问题 -- navigator事件冒泡
stx999的博客
07-10 713
项目开发中遇到的一个小问题，就是在navigator的父级元素是一个view有bindtap，点navigator时会触发父级元素bindtap的事件。 这时候可以给navigator加个catchtap事件，catchtap="funNull"，catchtap可以阻止冒泡事件向上冒泡，再在相应js文件里添加个空方法funNull：function(){}就行。 ...
微信小程序：自定义传参-点击或者其他事件的时候
最新发布
motoudi的博客
04-01 200
微信小程序，想在点击事件触发的时候传递参数，需要自己设置，通过data-参数名=“{{参数}}”接收参数使用的是：event.currentTarget.dataset.参数名。微信小程序点击事件用 bind:tap="事件名" 绑定。
嵌套div中点击子元素，阻止父元素事件的两种方法
Sky.Long的博客
11-18 2852
嵌套div中点击子元素，阻止父元素事件的两种方法
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值