点击antd select 下拉框时 Unable to preventDefault inside passive event listener invocation.

已于 2022-03-10 17:47:08 修改
阅读量1.5k 收藏
点赞数 5
文章标签： 前端 javascript react.js
于 2022-01-17 16:32:52 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_33159000/article/details/122542503
版权

最近在写一个项目，用到了antd的下拉框，点击的时候发现控制台报这个做错：Unable to preventDefault inside passive event listener invocation，各种查资料，汇总了几种解决方法，只有第三种起作用，可能是和我的项目有关：

1.在addEventListener增加第三个参数{ passive: false }，在报错的组件里并没有用到这个

2.设置全局样式: touch-action:none ，也不起作用

3.去掉插件 default-passive-events，浏览器控制台会有错误告警。。,警告如下：useTouchMove.js:154 [Violation] Added non-passive event listener to a scroll-blocking 'wheel' event. Consider marking event handler as 'passive' to make the page more responsive.

真是出了一个坑，又掉进另外一个坑。

ronger1019
关注
  • 5
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 6
    评论
在antd Form表单中select设置初始值操作
01-18
我就废话不多说了，大家还是直接看代码吧~ <Form.Item label=作用对象> {getFieldDecorator('targetId', { initial...Select placeholder=请选择作用对象> {targetList.map(entity => <Option key={enti
React中使用antd的select报错Unable to preventDefault inside passive event listener invocation.
wdnmd_69的博客
04-22 1454
问题描述 报错Unable to preventDefault inside passive event listener invocation. React中使用antd的select报错 Unable to preventDefault inside passive event listener invocation.` 解决方案1： 1卸载default-passive-events 但是此时会报警告useTouchMove.js:154 [Violation] Added non-passi
web前端：Unable to preventDefault inside passive event listener invocation的产生原因及解决
热门推荐
zctsir的博客
04-16 4万+
产生原因： 条件1：使用监听事件时候，第三个参数配置了passive为true(说明指定了这个监听为一个被动监听) window.addEventListener("touchmove", handler, { passive: true }); 条件2：上条件中的被动监听的handler中调用了 function handler() { //阻止默认事件，如点击&l...
[Violation] Added non-passive event listener to a scroll-blocking ‘touchstart‘ event. Consider marki
最新发布
qubes的专栏
06-06 542
这个警告通常出现在浏览器的开发者工具控制台中，是由于添加了非被动（non-passive）的事件监听器导致的。问题出在eruda这个工具 在tuchstart事件中使用了非被动事件监听器。什么是非被动（non-passive）事件监听器和被动事件监听器？非被动（non-passive）事件监听器。
谷歌浏览器事件坑：Unable to preventDefault inside passive event listener invocation.
古月水告的博客
03-24 687
从 chrome56 开始，在 window、document 和 body 上注册的 touchstart 和 touchmove 事件处理函数，会默认为是 passive: true。插件是解决浏览器告警的，我不想浏览器有告警信息，但加上又使浏览器报错，怎么处呢？，它默认情况下启用某些事件的被动事件侦听器，基本上每次声明新的事件监听器时，都会自动设置。插件导致的，注释了在main.js引入的就没有报错了。1、注册处理函数时，用如下方式，明确声明为不是被动的。，图一时畅快，现在出现问题了。
antd vue中点击 select 下拉框时， 报错Unable to preventDefault inside passive event listener invocation.
pan2259363027的博客
08-25 451
antd vue中点击 select 下拉框时， 报错Unable to preventDefault inside passive event listener invocation.
解决Unable to preventDefault inside passive event listener invocation. 报错
m0_59006402的博客
05-08 1206
解决办法：将 main.js中引入的：import 'default-passive-events' 注释掉。这个报错大致说的是 阻止默认行为。
Echarts区域缩放(datazoom)鼠标滚动报错：Unable to preventDefault inside passive event listener invocation(问题篇)
Duke10的博客
06-02 1327
1、解决办法： 文件node_modules下，找到zrender文件。在zrender文件中找到event.js文件。 具体路径：zrender/lib/core/event.js。 找到event.js文件下的addEventListener函数，如下修改标注红色字体部分。 代码：el.addEventListener(name, handler, { passive: false }); 2、所遇到的情况： 1、带区域缩放的时间轴。 当鼠标在图表上下滚动时，报错：Unable to prevent
antd多选下拉框一行展示的实现方式
01-21
我们都知道antd的select多选时，如果下拉框宽度不足，则自动浮动到下一行将下拉框撑大，但是这回影响到页面的整体布局。 我们期望的效果是，下拉框只显示一行的值，超出一行的部分自动隐藏。 下面有2种方案来实现这...
antd的select下拉框因为数据量太大造成卡顿的解决方式
01-22
相信用过antd的同学基本都用过select下拉框了，这个组件数据量少的时候很好用，但是当数据量大的时候，比如大几百条上千条甚至是几千条的时候就感觉一点都不好用了，卡的我怀疑人生，一点用户体验都没有了。...
解决Antd 里面的select 选择框联动触发的问题
01-22
有两个 select框，且这俩select框是关联的，触发select1，select2里面才会有值。 但是现在的问题是这样的： 触发select1，触发select2，再触发select1，此时select2里面的值变成了上次一选中的value 值，而不会被...
深入理解Antd-Select组件的用法
10-15
在Ant Design（Antd）框架中，Select组件是一个常用的下拉选择控件，它提供了丰富的功能和多种类型的实现，能够满足各种复杂的UI交互需求。本文将深入探讨Antd-Select组件的不同类型及其潜在的优化策略。 一、Antd-...
react ant-design Select组件下拉框map不显示问题
wangxu000000的博客
08-24 1388
问题描述：在使用Select Option下拉组件时，map遍历后不显示下拉框 错误写法： {dataList && dataList.map(item =>{( <Option key={item.id} value={item.value}>{item.value}</Option )})} 正确写法： {dataList && dataList.map(item =>( <Option k...
【前端】Ant Design of Vue a-select下拉框因为数据量太大造成卡顿的问题【滑动加载+模糊查询】
m0_64210833的博客
10-20 7196
Ant Design of Vue a-select下拉框因为数据量太大造成卡顿的问题【滑动加载】
antd 页面滚动下拉框不动问题
Jack_error的博客
03-24 2277
antd处理下拉框不随页面滚动问题 在antd中下拉框组件有很多比如： Select、SelectTree、DatePicker等，在点击后会出现下拉选择框，但是当我们华东页面时，会发现下拉框固定不动。 下面我给大家讲一下解决办法吧！ 分析 原因： 我们查看antd关于下拉选择时不难发现有个api叫 可以看到默认是挂到body的新建div上 但一般我们使用下拉选择框时，都会有父节点 包裹着选择组...
antd遇到的问题汇总
李蘑菇的博客
03-30 4180
开发过程中遇到的问题汇总，会一直累加
滑动报Unable to preventDefault inside passive event listener的解决办法
TangAcrab的博客
10-22 1万+
最新版的google浏览器滑动出现以下问题，因为我之前版本（64）没什么问题，升级到70后就出现报错了。 解决办法如下： 在html元素下添加class样式 touch-action: none; // scss html{ touch-action:none; } ...
react antd select下拉框选中一个值后变为输入框
03-30
在Ant Design的Select组件中，可以使用mode属性来设置下拉框的模式。默认情况下，mode属性的值为 "default"，表示下拉框只能选择预设的选项。如果将mode属性的值设置为 "tags"，则可以在下拉框中输入自定义的选项。 以下是一个示例代码： ``` import React, { useState } from "react"; import { Select } from "antd"; const { Option } = Select; const options = [ { value: "apple", label: "Apple" }, { value: "banana", label: "Banana" }, { value: "orange", label: "Orange" }, ]; function Demo() { const [value, setValue] = useState([]); function handleChange(value) { setValue(value); } return ( <Select mode="tags" style={{ width: "100%" }} placeholder="Please select" value={value} onChange={handleChange} > {options.map((option) => ( <Option key={option.value} value={option.value}> {option.label} </Option> ))} </Select> ); } export default Demo; ``` 在上面的代码中，我们将Select的mode属性设置为 "tags"，并且在handleChange函数中更新了组件的值。当用户选择一个预设的选项时，组件的值会变为该选项的值。当用户输入一个自定义的选项时，组件的值会变为输入框中的文本。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 6
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值