如题所问，因为业务需要大量的推送消息，所以要获取大量的formId, 因为通过事件冒泡来实现获取formId改动很大,所以打算做个button的遮罩层组件来获取formId，
1.通过冒泡事件实现 <form>
<button>
<页面数据></页面数据>
</button>
</form>
2.<页面数据></页面数据>
<form>
<button></button>
</form>
button的样式需要要写成隐藏遮罩一样
通过冒泡事件来实现获取formId可行,但是代码改动麻烦，所以想通过第二种做个button组件来实现，
请问大神们如何实现点击事件穿透???新人求助
你这属于歪门邪道啊，兄弟~
典型的欠封号
可以看看这个： https://www.qiguoqiang.com/2018/10/22/如何优雅的进行formId收集/
哥们，我就是嫌这种操作太麻烦了，镶嵌来镶嵌去，我是想要做一个覆盖这个页面的透明遮罩,当然这个遮罩不是阻断事件传递，就有点像position:fixed;top:0;left:0;right:0;bottom:0;piont-event:none的感觉吧. <页面数据>
这里是整个页面的数据
</页面数据>
<遮罩(一点击就会触发推送formId)/>
熟悉一下 CSS 的层叠上下文，层叠上下文元素高于普通元素，或者，父级同层时比较子级层级，
意味着拔高一些需操作部分，button 在其之下，其他依旧在底层。
项目中已实测过，方案可行。
但如果你想操作部分也是即要能操作也要能获取 formId，
理论上哈，推荐写个组件吧，感觉改动不算太大，
每个操作部分以 slot 传进去，button 覆盖在其上，触发 submit 时也外放出 click 方法。
样式方面嘛，感觉有点难搞。可以一起试验一下。
index.wxml
<button bindtap='normal'class="btn-red">普通按钮</button><form-id-wrap bindtap="normal"class="btn-red">自传 formId 的按钮</form-id-wrap>form-id-wrap.wxml
<form bindsubmit='submit'class='form-id-wrap'report-submit><slot></slot><button form-type='submit'class='cover'></button></form>form-id-wrap.js
Component({methods: {submit(e) {varformId = e.detail.formId;this.triggerEvent('submit', e);console.log('内部的', e);setTimeout(() => {this.triggerEvent('done','ajax ok');}, 300);}}});index.js
Page({normal(e) {console.log('壳套的', e);},submit(e, formId) {console.log(e, formId);}})奇妙的是，form-id-wrap 上的 tap 并未受影响，我还以为 form 之上不会冒泡的说。
把原来的 button 改为 form-id-wrap 后几乎不用怎么改动，
至于 button 的默认样式嘛，多半是抛弃的，问题不大。
熟悉一下 CSS 的层叠上下文，层叠上下文元素高于普通元素，或者，父级同层时比较子级层级，
意味着拔高一些需操作部分，button 在其之下，其他依旧在底层。
项目中已实测过，方案可行。
亲，上述的有代码可参考么
刚才试了下，不触发组件内部方法。。。
又可以了，谢亲啦
CSS 层叠上下文的 demo 代码不太好写，也很大程度受你代码风格的影响，我大致弄一下吧。
<scroll-view><form bindsubmit="ajax"report-submit class="cover"><button form-type='submit'></button></form><view class="scroll-wrap"><view class="others"><button class="control"bindtap="click">操作</button></view></view></scroll-view>.cover {position:absolute;z-index:1;top:0;left:0;right:0;bottom:0;}button {position:relative;z-index:2;}.others {position:relative;z-index:1;}.control {position:relative;z-index:2;}如果 只有 .cover 与 .control 是层叠上下文，则他俩层级会高于其他元素，且 .control 的 2 会更高。
但如果 .scroll-view 也是层叠上下文，此套方案就会被弄得很复杂了。你不妨一试，可以很好地加深对层级的理解。
穿透，穿透， 我要穿透。 啊 ~~
为何如此优秀的问题没有人回答呢~~
这个是用于买家下单后通知卖家的场景,卖家会不断接收消息!
简单,所有的能点击变成button,button你的改下(参考weui.io,主要小程序after,before看不见,不过与weui.io写法一样),然后把form隐藏,每次点击都会获取formId(手机端才能获取,很重要),发请求存入表(openid,formId必存),这个formId7天有效,用一个删一个,就这么简单
.......都说了是要用<form><button></button></form>弄一个可以点击穿透的透明遮罩覆盖整个页面作为一个自定义组件来用于每个页面收集formId了......
难道我说的不是...
<form bindsubmit="carpool" report-submit="{{true}}">
<view class='btn'>
<button formType='submit' class="weui-btn weui-btn_warn" open-type="getUserInfo">我要拼团</button>
</view>
</form>
var app = getApp();
var url = app.util.url(), formid = e.detail.formId;
if ('the formId is a mock one' == formid) {
console.log('请在手机端获取');
return false;
} else {
var data = {
formid : formid
};
//储存formId
wx.request({
url: url,
data: {
method: 'common.push.collectionFormId',
data: JSON.stringify(data)
},
method: 'post',
header: app.getHeaders(wx.getStorageSync('token')),
success: function (res) {
console.log(res);
if (res.data.code == 1) {
}
if (res.data.code == 2) {
app.auth.login(that, url);
}
},
});
}
观望观望，也想收集大量formid
期待这个答案
这里写成这样。点击form的时候传递一个formId,如果有openId也一起传给后端。后端绑定openId和formId 就可以给他推送了。至于想要多个formId 只需要在所有用户有点击的地方 都使用form嵌套button 就可以了。
我想你理解错我的想法了，我是想把<form><button></button></form>这部分做成一个可以点击穿透的遮罩组件,覆盖整个页面，无论点击那里都可以发送formId,然后这个组件可以用到多个页面
。。。。。。
。。。。。。大哥穿透了告诉我一声，我也用
。。。难受。。。。
很牛逼的想法