我有一个应用程序，可以有多个交互兄弟元素定位在相同的坐标，并具有相同的大小。我试图让他们都React本地指针事件，即触发一个CSS :hover状态，但显然只有顶部的一个React，并阻止其下的所有元素的React。没有CSS pointer-events设置似乎解决这个特殊的情况。有没有一种方法可以让 * 所有 * 元素都对指针事件做出React，而不必在所有元素之上的层上添加鼠标事件侦听器，并通过JS代码触发React，以及使用elementsFromPoint？
:hover
pointer-events
elementsFromPoint
j7dteeu81#
不幸的是，没有办法让占据屏幕上相同位置的多个HTML元素本地响应鼠标事件。当多个元素占据屏幕上相同位置时，出现在顶部的元素将接收鼠标事件，而其他元素将被阻止接收它。这是由于HTML和CSS中处理鼠标事件的本质。您的问题的一个可能的解决方案是使用单个元素来表示所有交互同级元素，并使用CSS在视觉上将它们分开。您可以使用CSS将不同的样式应用于元素的不同区域，并使用伪元素或子元素来表示不同的交互区域。这样，您仍然可以有多个交互区域占据屏幕上的同一位置。但是它们都将是能够固有地响应鼠标事件的单个元件的一部分。另一种选择是使用JavaScript处理鼠标事件，并为每个交互式同级元素触发相应的React。您可以使用elementFromPoint方法确定鼠标光标下的元素，然后为该元素触发相应的React。这种方法需要更多的编码，并且可能比使用本机鼠标事件处理效率更低。但如果需要多个交互式元素占据屏幕上的同一位置，它也可以工作。
1条答案
按热度按时间j7dteeu81#
不幸的是，没有办法让占据屏幕上相同位置的多个HTML元素本地响应鼠标事件。当多个元素占据屏幕上相同位置时，出现在顶部的元素将接收鼠标事件，而其他元素将被阻止接收它。这是由于HTML和CSS中处理鼠标事件的本质。
您的问题的一个可能的解决方案是使用单个元素来表示所有交互同级元素，并使用CSS在视觉上将它们分开。您可以使用CSS将不同的样式应用于元素的不同区域，并使用伪元素或子元素来表示不同的交互区域。这样，您仍然可以有多个交互区域占据屏幕上的同一位置。但是它们都将是能够固有地响应鼠标事件的单个元件的一部分。
另一种选择是使用JavaScript处理鼠标事件，并为每个交互式同级元素触发相应的React。您可以使用elementFromPoint方法确定鼠标光标下的元素，然后为该元素触发相应的React。这种方法需要更多的编码，并且可能比使用本机鼠标事件处理效率更低。但如果需要多个交互式元素占据屏幕上的同一位置，它也可以工作。