Html 当选择了某些子元素但未选择其中一个子元素时，浏览器将暗显列表元素

给定以下html结构：

   <ul>
      <li id = "li1" onclick="click('...');">
    <div class="card-container">
      <div class="card">
        <div class="front">
            <img class = "track_image" src="..." />
        <div class = "track_title">title</div>
        <div class = "artist_name">name</div>
        <div class = "release_date">date</div>
        <a  class = "visit_website_anchor" href="..."><img id = "visit_website" data-displayed="yes" src=.../></a>
        </div>
        <div class="back" data-displayed = "no">
          <img class = "track_image" src=... />
          <div class = "audio_controls">
        <audio controls></audio>
          </div>
        </div>
      </div>  
    </div>
      </li>
    </ul>

标题
名称
日期

然后，如果我单击列表项上除图像以外的任何位置，它将以暗显状态显示，我不会添加此项，因此浏览器会添加它。但是，如果单击track_image类，列表项不会变暗。

---

为什么它会对其他项目执行此操作，而不是对这个项目执行此操作？

父元素有一个

onClick

处理程序，当用户在webkit浏览器中单击它时，该处理程序将更改其行为，请尝试对其应用以下样式：

-webkit-tap-highlight-color: rgba(0,0,0,0);

发件人：

“覆盖用户点击链接或链接时显示的突出显示颜色 iPhone上Safari中的JavaScript可点击元素

如果指定，则此属性符合alpha值。如果未指定，则 指定alpha值，iPhone上的Safari将应用默认alpha值 要禁用点击高亮显示，请将alpha值设置为0 （不可见）。如果将alpha值设置为1.0（不透明），则元素 轻敲时不可见。”