阻止事件冒泡 -- 在antd-mobile中，拦截点击picker后默认打开行为

最新推荐文章于 2023-05-08 09:45:00 发布

daisymao0205

最新推荐文章于 2023-05-08 09:45:00 发布

阅读量1.8k

点赞数

文章标签： jquery reactjs javascript es6

本文链接：https://blog.csdn.net/daisymao0205/article/details/107689474

版权

本文介绍如何在Antd-Mobile中阻止Picker组件的点击事件冒泡，通过在父元素上添加jQuery事件监听，使用event.stopImmediatePropagation()方法来判断数据，避免在数据为空时打开Picker。

摘要由CSDN通过智能技术生成

由于公司项目业务逻辑需求，需要在点击picker后判断数据是否为空，再决定是否打开picker；若接口响应数组为空，阻止picker打开。

这里就需要用到jQuery的event.stopImmediatePropagation() 方法（执行第一个事件处理程序，并阻止剩下的事件处理程序被执行）

给picker外层DIV进行添加id属性

<div id='ID'>
    <Picker
        data={data}
        cols={1} {...getFieldProps('historyRecord')}
        onOk={this.historyRecorOkClick}
    >
        <div className='selectMsgBlock'>
            <div className='leftBlock'>{historyRecord}</div>
            {
              !isChoose
                ? <div className='rightBlock'>选择</div>
                : <div className='rightBlock' onClick={this.reSet} >清除</div>
            }
        </div>
    </Picker>
</div>