开发者社区

文档建议反馈控制台

文章/答案/技术大牛

发布

当Material-UI Popover处于打开状态时，无法单击其背景下的元素

基础概念

Material-UI 是一个流行的 React UI 框架，提供了丰富的组件库，用于构建现代化的 Web 应用程序。Popover 组件是 Material-UI 中的一个组件，用于显示一个浮动的弹出框，通常用于显示额外的信息或操作选项。

问题描述

当 Material-UI 的 Popover 组件处于打开状态时，用户无法通过单击其背景下的元素来与这些元素进行交互。这是因为 Popover 组件默认会阻止背景上的点击事件冒泡到下面的元素。

原因

Popover 组件在打开时会设置一个覆盖层（overlay），这个覆盖层会捕获所有的点击事件，从而阻止事件冒泡到下面的元素。这是为了防止用户在 Popover 打开时误操作背景上的元素。

解决方法

要解决这个问题，可以通过以下几种方法：

设置 disableBackdropClick 属性：通过设置 disableBackdropClick 属性为 true，可以禁用覆盖层的点击事件捕获功能，从而允许用户点击背景上的元素。
设置 disableBackdropClick 属性：通过设置 disableBackdropClick 属性为 true，可以禁用覆盖层的点击事件捕获功能，从而允许用户点击背景上的元素。
自定义覆盖层行为：如果需要更复杂的控制，可以通过 BackdropProps 属性来自定义覆盖层的行为。
自定义覆盖层行为：如果需要更复杂的控制，可以通过 BackdropProps 属性来自定义覆盖层的行为。

参考链接

Material-UI Popover Documentation

通过上述方法，可以有效地解决 Material-UI Popover 在打开状态下无法单击其背景下的元素的问题。

相关搜索:当元素处于活动状态时，阻止单击元素的单张绘制当tabPanel处于活动状态或悬停在闪亮模式下时，更改其背景颜色当KML中的某个要素的描述处于打开状态时，是否可以更改其颜色？当android studio处于关闭状态时(仅在android studio中运行)，Flutter在命令提示符下无法在连接的设备上运行应用程序服务器日期怎么修改服务器主机安全测试服务器搭建域名邮箱服务器screen 服务器内存一直在升服务器用的最多系统

相关搜索:

页面内容是否对你有帮助？

有帮助

没帮助

相关·内容

依赖什么啊？依赖注入……，什么注入啊？

比如用户A希望鼠标悬停的时候，Tooltip可以显示在头像的上方。而用户B则希望可以定制Tooltip的背景色/字体/字号等等。...的有紧密的关联关系：仅当InlineEdit处于invalid时，InlineDialog才需要显示，默认情况则不显示。...value) => { return false; }} /> ); }; 因为作为父节点，InlineDialog无法获知其子节点的状态...（当然可以通过context来传递状态，不过那样又会失去组件的通用性）。..."@material-ui/core/Popover"; import Typography from "@material-ui/core/Typography"; const MyEdit = ()

2.2K2 0

对话框、模态框和弹出框看起来很相似，它们有何不同？

只有模态内容可以交互，页面或应用程序的其余部分都是惰性的。惰性内容是用户无法交互的内容。它只有在视觉方面存在，你无法通过 Tab 键切换、单击、滚动或通过辅助技术访问内容。...-- everything else --> 其核心在于一个元素是模态的，而其他元素则是惰性的，即无法被任何用户或操作访问。...当您在其外部单击时，它会消失。...当 popover 打开时，将焦点移动到 popover，可以设置 popover 本身或其中的元素 autofocus 属性。正常情况下，该属性在页面加载时设置焦点。...总结/结论最后，总结一下：组件的模态性是一种状态，只有在这种状态下，该组件才能使用。当某物是模态的，其他一切都变得无效：阻止任何方式访问，不可聚焦，通常被背景层所遮盖。

5K0 0

React 项目里，如何快速定位你的组件源码？

然后打开页面试一下：可以看到，现在按住 option + 单击，就会直接打开它的对应的组件的源码。...如果按住 option + 右键单击，可以看到它的所有父级组件，然后选择一个组件打开：这样在页面上看到了啥东西就可以直接打开它的组件代码来改，特别高效。...至于这个 popover，是用 @floating-ui 做的，所有浮动元素都可以用这个来做。此外，这个 click-to-react-component 需要在生产环境去掉么？不用。...只要在页面上 option + 单击，或者 option + 右键单击然后选一个组件，就可以直接打开对应组件源码的行列。...然后通过 vscode://file/xxx 的方式直接 vscode 打开对应文件行列号。这样就完成了点击页面元素，打开对应源码的功能。

5101 0

揭秘 Google IO Web 新动态，看这一篇就够了！

当某个功能成为基准新功能（Baseline Newly Available）时，它可能刚刚跨浏览器可用，甚至可能在本周发布的浏览器中可用。...当这些条件满足时，你可以应用相应的 CSS。在该示例中，当容器宽度超过 500 像素时，卡片将会转换为两列网格布局。...在没有嵌套的情况下，每个选择器都要单独声明：这可能导致相关的选择器在样式表中分散，令编写体验更加糟糕。无法确认某些选择器已经存在，而重复添加相同的内容。...The inert attribute 当一个元素是 inert 时，它无法被交互，你会在使用 dialog 元素时看到这一点，页面上在对话框后面的元素无法被点击或通过 Tab 键选中。...如果你将 inert 属性应用于某个元素，点击该元素时将不会触发点击事件。该元素无法获得焦点，该元素及其内容将对辅助技术隐藏，因为它已从无障碍树中排除。

1671 0

Flutter TolyUI 框架#02 | Popover 与 Tooltip 设计

二、TolyTooltip 用法对于桌面端和 web 平台来说，悬浮展示提示信息是一个非常常用的功能。下面介绍一下 TolyTooltip 的用法，感受一下它所带来的便利性和强大功能。...样式设置 TolyTooltip 提供了很多可配置的选项，比如背景色、填充模式等，让使用者可以更灵活地展示信息。另外通过设置最大高度，可以在弹框高度过高时允许滑动。...的设计动机当点击组件时，有时需要打开一个浮层弹框，并且在面板中进行交互。...比如 Photoshop 工具悬浮时展示的浮层面板，可以通过 Popover 展示：四、Popover 的使用 Popover 的使用案例介绍可以网站访问 TolyUI 的 web 版 Flutter...除此之外，双击事件，按下事件、抬起事件，甚至是自定义的交互手势，都可以通过控制器来打开或关闭浮层： TolyPopover( placement: Placement.top, maxWidth

6731 0

Human Interface Guidelines —— Popovers

Popover Popover是一个短暂的视图，当您点击某个控件或某个区域时，它会出现在屏幕上的其他内容上方。通常，Popover包含指向其出现位置的箭头。...在大多数情况下，当有人在popover之外区域点击或选择popover中的项目后，popover应该关闭。...·将popover放在屏幕中适当的位置 popover的箭头应直接指向弹出它的元素。由于popover无法在屏幕上拖动，因此popover不应包含人们在使用popover时可能需要查看的基本内容。...·可能的话，让用户点击一次就能关闭一个popover的同时打开另一个popover 当几个不同的按钮每个都打开一个popover时，避免额外的点击是特别明智的。...·确保自定义popover看起来像popover 虽然您可以自定义popover的视觉方面，但不要设计出人们可能无法识别的popover。当包含标准控件和视图时，popover的展示效果最好。

1.5K11 0

Java实现扫雷小游戏介绍

玩法左键单击：在判断出不是雷的方块上按下左键，可以打开该方块。...右键单击：在判断为地雷的方块上按下右键，可以标记地雷（显示为小红旗）。标记地雷后重复一次右击则标记（？），需要一次或两次操作右击来取消标雷）。双击：同时按下左键和右键完成双击。...当双击位置周围已标记雷数等于该位置数字时操作有效，相当于对该数字周围未打开的方块均进行一次左键单击操作。地雷未标记完全时使用双击无效。若数字周围有标错的地雷，则游戏结束。...如果游戏处于运行状态，则要判断点击的位置是否为地雷，如果是地雷直接结束，否则执行默认的方块打开操作。...方块被打开是在鼠标弹起操作后，双击按下只是显示相关方块的背景，给人的效果是方块被按下去。统计点击位置周围的标记数量，标记数量和显示数字一致的话，打开剩余方块。

1.6K6 0

自己设计的Vue3的实用项目（内含对项目亮点的实现思路与介绍）

：既然这个组件是一个气泡框，那么必然需要一个元素来确定这个气泡框的出现位置，因此我想把这个组件做成通过自定义指令 v-popover 来调用接下来看下我的设计过程哈首先是组件的内容： // lp-popover.vue...，我先来介绍一下这个项目的数据存储我秉承着一种能不用到服务器就不用服务器，能不用数据库就不用数据库的原则，想到了 localStorage 可以作为一个本地的数据库使用，每次换浏览器或设备时，只需要将...刚开始我是用锚点实现的，但后来发现这样的跳转太生硬了，所以就自己简单地实现了一下跳转动画实现原理大概是这样：右侧内容中每个标签都有带有一个 id，并且左侧的每个按钮也是对应着各自的 id 的，所以当点击了按钮时...，先获取到对应 id 的元素 el，并获取 el 离滚动页面顶部的距离，即 el.scrollTop，然后同时获取一下当前位置离滚动页面离顶部的距离，如下图所示： ?...，但是有些网页对外部来路不明的请求都做了处理，例如返回一个 403 Forbiden 把我的请求给拒绝了，因此一些无法获得的图标或者无法加载的图标，我都是用一个默认图标统一替代，虽然之前我做过挺久的爬虫

2.8K4 1

基于 HTML5 Canvas 的拓扑组件 ToolTip 应用

enableToolTip() 为开启，diableToolTip() 为关闭，上图中我通过右上角的按钮调用这两个方法进行了 ToolTip 的开启和关闭，需要注意的是 ToolTip 默认是处于关闭状态的...，因此 htconfig 必须在引入 ht.js 包之前初始化好，运行状态时修改 htconfig 变量不会再起作用，示例代码如下： htconfig = {...// 组件的ToolTip显示的情况下，如果鼠标移动到新的位置时，ToolTip是否实时持续跟进 toolTipContinual: true, // ToolTip...从图中我们可以看到，ToolTip 的内容变为了两行，但是在上一部分提到过使用 HT 默认设置的格式是无法对内容进行换行的。...，当鼠标移动到一个新节点上就会显示其 Popover，同时对原节点的 Popover 进行隐藏，之后在 graphView 上添加私有变量进行记录。

1.3K1 0

CSS 实用新特性：交互、组件、效率的革新

点击按钮时，弹窗会缓动滑入；按下 Esc 键或点击空白处，弹窗会自动反向滑出关闭。...锚点定位（Anchor Positioning）技术核心：position-anchor 属性允许开发者更精准地控制元素相对于其锚定元素的位置，而 inset-area 则提供了更灵活的定位区域控制。...结合容器查询样式的卡片元素，当卡片界面大小发生变化时，固定的菜单等定位元素也能随新布局一起动态移动，保持与锚点元素的正确位置关系。....这是通过相对颜色语法实现的，背景和列表根据色相使用主色，并调整亮度、色度和色相通道以调整其值。这种方式使得颜色的调整更加高效，为开发者提供了更大的创作空间。...（三）选择器增强技术核心：:has() 选择器允许开发者检查子元素是否具有特定子元素或处于特定状态，通过父选择器逻辑实现逆向匹配，突破了传统 CSS 单向层级的限制。

4011 0

自己设计的Vue3的实用项目（内含对项目亮点的实现思路与介绍）

：既然这个组件是一个气泡框，那么必然需要一个元素来确定这个气泡框的出现位置，因此我想把这个组件做成通过自定义指令 v-popover 来调用接下来看下我的设计过程哈首先是组件的内容： // lp-popover.vue...，我先来介绍一下这个项目的数据存储我秉承着一种能不用到服务器就不用服务器，能不用数据库就不用数据库的原则，想到了 localStorage 可以作为一个本地的数据库使用，每次换浏览器或设备时，只需要将...刚开始我是用锚点实现的，但后来发现这样的跳转太生硬了，所以就自己简单地实现了一下跳转动画实现原理大概是这样：右侧内容中每个标签都有带有一个 id，并且左侧的每个按钮也是对应着各自的 id 的，所以当点击了按钮时...，先获取到对应 id 的元素 el，并获取 el 离滚动页面顶部的距离，即 el.scrollTop，然后同时获取一下当前位置离滚动页面离顶部的距离，如下图所示： ?...，但是有些网页对外部来路不明的请求都做了处理，例如返回一个 403 Forbiden 把我的请求给拒绝了，因此一些无法获得的图标或者无法加载的图标，我都是用一个默认图标统一替代，虽然之前我做过挺久的爬虫

1.2K2 0

iOS 17 ：Webkit 更新了哪些新功能？

> 新的 Popover 属性 popover 属性为 Web 提供了可以用来实现弹出窗口和对话框的原生内置能力。...目前有两种类型的弹出窗口，对应 popover 属性的两个值： auto：当你单击弹出窗口外部时自动关闭； manual：没有自动关闭行为。...我们可以从一个按钮（或）开始，创建一个用于打开和关闭弹出窗口的界面。...在以前，一个网站的初始存储限制为 1GB。当超过该限制时，后续的存储操作会失败，或者在 Safari 中提示用户授权增加限额。现在，网站的限额可以基于总磁盘空间来计算。...storageEstimate.quota - storageEstimate.usage : 0; } 当网站的存储模式为持久时，存储数据不会被清理。

8436 0

最新iOS设计规范二｜7大应用架构

（实际是大多数应用都在登录页面显示协议和免责声明，并要求用户进行勾选）当您的应用重启时，恢复以前的状态。不要让用户自己去追溯重启前位置。应当保留并还原应用的状态，以便用户可以从上次中断的地方继续。...人们通过以下方式关闭卡片：从屏幕顶部向下滑动卡内容滚动到顶部时，可以从屏幕任意位置向下滑动轻按一个按钮工作表常用在无法实现复杂任务的、非沉浸式的模式和内容。...除非是警示框，任何元素都不该出现在Popover上。在极少数情况下，当用户在Popover中执行操作后需要用到模态视图时，请在显示模态视图之前先关闭Popover。通常为模态任务设置一个标题。...例如，当模态视图包含导航栏时，它应该采用与APP导航栏相同的外观。为模态视图的展示提供合适的过渡动画。使用与APP风格统一的过渡动画，增强用户对内容转变的认知。...拆分视图提供与选项卡栏相同的快速导航，同时更好地利用了大屏幕。当您具有内容类型相同的多个页面时，请使用页面控件。页面控件清楚地传达了可用页面的数量以及当前处于活动状态的页面。

3K2 0

Python 应用开发：Streamlit 布局篇（容器布局）

在模式对话框中，点击 "提交 "将您的投票记录到会话状态并重新运行应用程序。这将关闭模式对话框，因为在重新运行全脚本时不会调用对话框功能。...在应用程序中插入一个可容纳多个元素的容器，用户可以展开或折叠该容器。折叠时，可见的只是提供的标签。要向返回的容器中添加元素，可以使用 with 符号（首选）或直接调用返回对象的方法。...插入一个多元素容器作为弹出窗口。它由一个类似按钮的元素和一个在点击按钮时打开的容器组成。打开和关闭弹出窗口不会触发重新运行。与打开的弹出窗口内的部件进行交互将重新运行应用程序，同时保持弹出窗口打开。...[element_name] 传递给 st.sidebar 的每个元素都会固定在左侧，让用户专注于应用程序中的内容。提示侧边栏可以调整大小！拖放侧边栏的右边界即可调整其大小！...要在返回的容器中添加元素，可以使用 with 符号（首选），或者直接调用返回对象的方法。请看下面的示例。tabs为列表中的每个字符串创建一个选项卡。默认情况下选择第一个标签页。

2.3K1 0

WDC2023 — Web 开发者划重点

img 将丰富的 3D 内容嵌入网页的能力将打开一个充满可能性的世界。例如，买衣服的网店可能会提供所有衣服的模型。...img HTML popover Safari 17 增加了对 popover 属性的支持。它提供了一个用于显示叠加层、弹出窗口、和对话框的框架。...有两种类型的弹出框，可用作 popover 属性的值： auto 弹出窗口，当你在弹出窗口外单击时自动关闭； manual 弹出窗口，没有自动关闭行为。...我们可以使用元素创建用于打开和关闭弹出框的 UI，并添加适当的 HTML 属性来创建所需的结果。popovertarget 属性通过 ID 将按钮连接到弹出窗口的内容。...在不需要使用 JavaScript 的情况下创建下拉框元素之间的视觉分隔符变得更加容易。

5444 0

BootStrap应用开发学习入门1

keyboard boolean 默认值：true data-keyboard 当按下 escape 键时关闭模态框，设置为 false 时则按键无效。...弹出框（Popover）插件根据需求生成内容和标记，默认情况下是把弹出框（popover）放在它们的触发元素后面。...shown.bs.popover 当弹出框对用户可见时触发该事件（将等待 CSS 过渡效果完成）。 hide.bs.popover 当调用 hide 实例方法时立即触发该事件。...$().button('loading') .button('reset') #重置按钮状态，文本内容恢复为最初的内容。当您想要把按钮返回为原始的状态时，该方法非常有用。...（collapsible）； parent selector 默认值：false data-parent 如果提供了一个选择器，当可折叠项目显示时，指定父元素下的所有可折叠的元素将被关闭。

46K3 0

SI持续使用中

除“等于”（表示“相同”）以外的任何属性都将与父样式格式组合。添加样式单击此按钮添加新的用户定义样式。删除样式单击此按钮删除用户定义的样式。标准内置样式无法删除。...加载… 单击此按钮可以从配置文件中加载新的样式表。保存单击此按钮可将当前样式表设置保存到新的样式配置文件。该文件将仅包含样式属性，并且不包含可以存储在配置文件中的其他元素。...单击此按钮可以指定搜索结果中包含哪些信息。搜索选项区分大小写指定搜索是否区分大小写。全字对于“查找引用”模式，此选项始终处于启用状态。...跳过无效代码如果启用，则仅搜索在条件编译下处于活动状态的代码。必须首先在“首选项：语言”对话框中指定已知条件，以使Source Insight知道哪些条件处于活动状态。...关键字搜寻结果当您执行关键字搜索时，“搜索结果”将列出同时包含关键字的行块。这为您提供了有关比赛的一些背景信息。 ? 搜索界面 ? 文件树 ? 这个是文件夹的右键菜单 ? 打开左栏的符号树 ?

4.2K2 0

BootStrap应用开发学习入门1

keyboard boolean 默认值：true data-keyboard 当按下 escape 键时关闭模态框，设置为 false 时则按键无效。...弹出框（Popover）插件根据需求生成内容和标记，默认情况下是把弹出框（popover）放在它们的触发元素后面。...shown.bs.popover 当弹出框对用户可见时触发该事件（将等待 CSS 过渡效果完成）。 hide.bs.popover 当调用 hide 实例方法时立即触发该事件。...$().button('loading') .button('reset') #重置按钮状态，文本内容恢复为最初的内容。当您想要把按钮返回为原始的状态时，该方法非常有用。...（collapsible）； parent selector 默认值：false data-parent 如果提供了一个选择器，当可折叠项目显示时，指定父元素下的所有可折叠的元素将被关闭。

46.6K2 1

加点JavaScript魔法

Bootstrap文档中的popover示例都将目标HTML元素的data-content属性设置为popover的内容，因此当触发悬停事件时，Bootstrap需要做的只是显示弹出窗口。...使用“悬停”模式时，只要你将鼠标指针放在目标元素中，弹出窗口就会保持可见状态。当你移开鼠标时，弹出窗口将消失。这具有糟糕的副作用，即如果用户想要将鼠标指针移动到弹出窗口中，弹出窗口将消失。...将popover作为悬停元素的子元素可以很好地用于按钮或一般的或元素，但在我的情况下，popover的target将是显示用户名的可点击链接的元素。...不幸的是，当直接在JavaScript端构建URL时，我无法使用Flask中的url_for()，所以在这种情况下，我必须显式连接URL的各个部分。...文档中提到，当通过Ajax添加新的Flask-Moment元素时，需要调用flask_moment_render_all()函数来适当地渲染这些元素。

4.5K1 0

使用chrome调试CSS

查看CSS 查看元素对应的样式 1、打开调试工具，点击调试工具左上角的检查元素按钮或者快捷键（Ctrl/Cmd + Shift + C） 2、在页面选中需要查看的元素，被检查的元素在DOM树中以蓝色背景突出显示...5、当鼠标悬浮在某一行属性上时，会出现一个圆形箭头按钮，点击可以跳转到styles 选项卡所对应的样式处。查看元素伪状态 1、在 styles 选项卡中点击 :hov 。...添加新样式规则 1、单击 styles 选项卡右上角的加号1➕，DevTools会在 element.style 规则下插入一条新规则。...则处于焦点以打开命令菜单。...DevTools根据它在样式表中找到的颜色生成页面调色板。使用吸管从页面上取样打开拾色器时，默认情况下吸管滴管处于打开状态。

6.1K2 0

点击加载更多

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭