如何更改 div 元素的背景图像 pointer-events： None 当它被点击时？-解网

问：

我正在使用 iframe 中嵌入的两个第三方页面的组合来创建移动登录页面。其中一个 iframe 已优化为以 50x50 尺寸显示音量按钮。问题是声音默认关闭，音量控制按钮被隐藏。iframe 仅显示白色背景，这也不适合占据大部分视口的其他 iframe 的深色背景。只有当触摸/单击 50x50 iframe 区域时，扬声器图标才会出现几秒钟，因此访问者不知道他们应该触摸它以打开声音。

我问了 ChatGPT，它告诉我可以使用 JavaScript 来做我需要的事情，但事实证明这是一个虚假信息。JavaScript 无法捕获禁用了单击事件的元素上的单击事件。

到目前为止，我能想到的最好的解决方案是在静态扬声器图标上使用 pointer-events： none 属性，指示音量已关闭，并使用隐藏的声音按钮将其放在 iframe 上。但是当声音已经打开时，它看起来真的很奇怪，但图标仍然显示它已关闭。

<iframe
  frameborder="0"
  height="50"
  scrolling="no"
  src="speaker.html"
  style="bottom: 0; left: 0; position: absolute; z-index: 1"
  width="50"
></iframe>

<div class="speaker"
  style="
    background-image: url('Sound-Off.png');
    bottom: 0;
    height: 50;
    left: 0;
    pointer-events: none;
    position: absolute;
    width: 50;
    z-index: 2"
></div>

正如我所描述的那样，上面的内容可以正常工作，但用户看起来感到困惑，因为图标不会切换到“音量打开”状态。

let isOn = false;
const element = document.querySelector('.speaker');
element.addEventListener('click', function(event) {
  isOn = !isOn;
  if (isOn) {
    element.style.backgroundImage = 'url("Sound-On.png")';
  } else {
    element.style.backgroundImage = 'url("Sound-Off.png")';
  }
});

这个 JavaScript 片段是我在 ChatGPT 的帮助下制作的，但事实证明它不适用于 .pointer-events: none

请不要被代码段中看到的 iframe 中的同源 URL 所误导。我在 iframe 的 iframe 中使用了 iframe 的 hack，最后一个 iframe 包含一个跨域 URL，正如我在开头提到的“第三方”页面。

有没有一种简单的解决方法可以使声音图标在单击时更改其状态，并让单击同时转到下面的 iframe？

javascript css 指针事件

@imhvost我真的不知道该怎么做。我不是编程或 Web 开发方面的专家。我要么需要一个分步的指导来解决我的问题，要么我担心我不能自己想出一个解决方案，让我找到另一个显然可能与我有关的问题。但正如我所说，我不是任何专家。我对 JavaScript 一无所知，只了解 HTML 和 CSS 的一些基础知识，但仅此而已。

2赞 imhvost 11/5/2023

如果 ChatGPT 不能帮助你，而你自己也做不到，请聘请专业人士。

答：

0赞 Afzal K. 11/5/2023 #1

好吧，在这里我只是将 div 包装在另一个 div 中，所以当单击此父 div 时，它将使用指针事件 none 更改内部 div 的图像

let isOn = false;
const parent = document.querySelector(".parent");
const element = document.querySelector('.speaker');
parent.addEventListener('click', function(event) {
  isOn = !isOn;
  if (isOn) {
    //element.style.backgroundImage = 'url("Sound-On.png")';
    element.style.background = "green";
  } else {
    //element.style.backgroundImage = 'url("Sound-Off.png")';
    element.style.background = "red";
  }
});

.parent {
    bottom: 0;
    height: 50px;
    left: 0;
    cursor: pointer;
    position: absolute;
    width: 50px;
    z-index: 2;
}

.speaker {
    background: red;
    bottom: 0;
    height: 50px;
    left: 0;
    pointer-events: none;
    position: absolute;
    width: 50px;
    z-index: 2;
}

<iframe
  frameborder="0"
  height="50"
  scrolling="no"
  src="speaker.html"
  style="bottom: 0; left: 0; position: absolute; z-index: 1"
  width="50"
></iframe>

<div class="parent">
<div class="speaker"></div>
</div>

当然，我也有这个想法，但问题是父 div 不会让点击通过它下面的 iframe 以较低的 z 索引。想象一下，禁用指针事件的子 div 就像一张网，可以让一滴水通过，但父 div 是该子 div 正下方的玻璃杯，如果父 div 允许指针事件，无论如何都会阻挡水滴。也许使父 div 的 z 索引低于 iframe 的 z 索引会起作用？但我认为这会自动使子 div 的 z-index 也低于 iframe 的，因为它会继承。

0赞 Afzal K. 11/5/2023

好吧，如果您可以添加 YouTube iframe 并让我知道您想通过点击做什么，也许可以对其进行排序

0赞 Alex1987 11/5/2023

如上所述，我在 iframe hack 中使用了 iframe 中的 iframe 来准确获取我需要的声音按钮，并放大了 200%。所以现在我有来自父 iframe 50x50px 中的跨域页面的声音按钮。但该按钮仅在触摸（交互）时才会显示。这就是为什么我需要在 iframe 上放置一个自定义覆盖扬声器图标，该图标将允许单击进入下面的 iframe 并将其状态从关闭更改为打开。如果这是不可能的，我想不是，那么即使打开了声音，我也必须保持图标状态始终处于关闭状态。

0赞 Alex1987 11/5/2023 #2

我问题的解决方案非常简单，我只需要对我面临的限制有一点创意。

因此，我没有使用带有指针事件的静态叠加层的红色扬声器图像：无，而是创建了一个新的 50x50px 图像，上半部分显示“AUDIO SWITCH”，并在下半部分包含两个扬声器图标，一个红色表示声音关闭，另一个绿色表示声音打开。

这是新叠加图像的样子。🙌

上一个：Javascript 拖放不适用于指针事件

下一个：获取浏览器/反应以区分在元素容器上水平滚动与拖动该容器中的单个元素

如何更改 div 元素的背景图像 pointer-events： None 当它被点击时？

How to Change Background Image of a Div Element with Pointer-Events: None When It's Clicked?

评论

评论