Javascript 检查客户端是否单击仅在CSS文件（如类的背景）中定义的图像

是否可以通过javascript检查客户端是否单击css文件中定义的某个div类的背景图像

.volume {
    width: 40%;
    margin: auto;
    padding-left: 40px;
    background: url(../img/speaker.png) left center no-repeat;
    height: 30px;
    line-height: 30px;
    margin-top: 2em;
}

我真的不想更改HTML文件，因为我不是所有者

下面是HTML代码

  <div class="volume">
                <div class="progress-bar">
                    <div class="progress">
                        <span></span>
                    </div>
                </div>
            </div>

---

您只需在扬声器图标上放置一个透明元素，并为其指定一个单击事件，即可完成此操作

看这个

.卷{
宽度：40%；
保证金：自动；
左侧填充：40px；
/*背景：url（../img/speaker.png）左中心不重复*/
背景：url(http://findicons.com/files/icons/1672/mono/32/speaker.png)左中无重复；
高度：30px；
线高：30px；
边缘顶部：2米；
}
#覆盖层{
z指数：1000；
背景色：透明；
高度：32px；
宽度：32px；
位置：相对位置；
右：40px；
底部：2px；
}
var$overlay=$（“我不确定这在您的终端上是什么/如何，但是如果您希望检查用户是否单击了.volume div（而不是.progress bar或.progress），您只需检查单击事件的
目标
：

var volume = document.querySelector('.volume');
volume.addEventListener('click', function(e) {

  // check if it was the .volume div
  if (e.target.className === 'volume') {
    // do something
  }
});

当然，您可以将单击事件绑定到整个卷div，尽管确定它是否属于背景图像有点棘手，但可以通过“单击背景图像”来完成，你是指
.volume
div上的任何地方，还是指图像的不透明部分？PHP与此有什么关系？我需要实现静音功能…因此音量变为零…但我不需要单击div上的任何地方..而只需单击扬声器图标..我担心这是不可能的..但这是不可能的我问的原因是…所以我等了几个小时，看看有没有人有什么好主意…如果没有机会这么做…我必须编辑HTML并将图像添加到HTML而不是CSS…谢谢，效果很好…我只需要更新一些CSS行样式，但很好：D
var volume = document.querySelector('.volume');
volume.addEventListener('click', function(e) {

  // check if it was the .volume div
  if (e.target.className === 'volume') {
    // do something
  }
});