简书链接:微信小程序的bindtap和catchtap实际场景对话框中按钮点击和对话框背景点击处理笔记
文章字数：287,阅读全文大约需要1分钟
如果给对话框中的按钮设置bindtap 那么 背景view 使用bindtap将无法收到事件,但是使用catchtap则可以，但是 点击按钮会先触发按钮的事件然后触发背景的事件，也就是说会触发两个事件

实际上的情况是需要点击按钮就触发按钮的事件，点击背景就触发背景的事件，
因此改成了子view设置位catchtap 父view随意即可解决问题。 因为子view比父view大，组织冒泡的区域也就是子view区域而已，当前场景是合适的。

https://developers.weixin.qq.com/miniprogram/dev/framework/view/wxml/event.html#%E4%BA%8B%E4%BB%B6%E7%9A%84%E4%BD%BF%E7%94%A8%E6%96%B9%E5%BC%8F
最后补充，需要给dialog-content也设置事件，否则点击对话框非按钮的部分也会消失，

1
catchtap="_dialogAeraClick"

下面是完整写法

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<view class="dialog-root-wrap" style="display:{{showSearchDialog?'flex':'none'}};">
    <view class="dilog-root" bindtap="dismissDialog">
        <view class="dialog-content" style="border-radius: 15rpx;min-width:60%;min-height:25%;" catchtap="_dialogAeraClick">
            <view class="vertical">
                <view class="input_wrap_style" id="keyword">
                    <input class="myinput" password type="text" placeholder="输入关键词" bindinput="bindKeywordInput" value="{{keyword}}" />
                </view>
                <picker style="margin-top: 20rpx;" mode="date" value="{{startdate}}" start="{{initStartDate}}" end="{{initEndDate}}" bindchange="_changeDate" data-value="0">
                    <view class="tui-picker-detail">
                        开始时间: {{startdate}}
                    </view>
                </picker>
                <picker style="margin-top: 20rpx;" mode="date" value="{{enddate}}" start="{{initStartDate}}" end="{{initEndDate}}" bindchange="_changeDate" data-value="1">
                    <view class="tui-picker-detail">
                        结束时间: {{enddate}}
                    </view>
                </picker>
                <slot></slot>
                <button id="search" catchtap="searchClick" type="primary" style="margin-top: 30rpx;">{{confirmSearchText}}</button>
            </view>
        </view>
    </view>
</view>