Question

我有一个带有jQuery点击监听器的元素列表，它只是为点击的<li>元素添加了一个类。此无序列表嵌套在一些<div>元素中，这些元素使用transform: matrix3d(...)属性进行放置和转换。应隐藏列表溢出这在Chrome中运行得非常好，但IE11（11.0.x）存在一些问题。单击<li>元素会导致在完全不同的<li>元素处触发事件由于某些原因，我必须使用这种矩阵变换，我也需要这些溢出。但也许你知道一个简洁的解决方法，或者只是可以说这是IE中常见的错误而且无法解决。

这是MWE：

$('li').on('click', function(e) {
  if ($(this).hasClass('selected-li')) {
    $(this).removeClass('selected-li');
  } else {
    $(this).addClass('selected-li');
  }
});

.myContainer {
  position: absolute;
}

.overflow-hidden {
  overflow: hidden;
}

.clientList {
  height: 333px;
  overflow-y: auto;
}

.selected-li {
  background-color: #ececec;
  color: #008CD6;
}

body {
  background-color: #888888;
}

#d-01 {
  background-color: #565656;
}

#d-01 {
  background-color: #f8f8f8;
}

#d-02 {
  background-color: #eeeeee;
}

#d-03 {
  background-color: #e8e8e8;
}

#d-04 {
  background-color: #dddddd;
}

<!DOCTYPE html>
<html>

<head>
  <script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>
</head>

<body>
  <div id="d-01" class="myContainer" style="width: 1878.12px; height: 993.96px; transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 54, 99, 1, 1);">
    <div id="d-02" class="myContainer overflow-hidden" style="width: 100%; height: 100%; transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 1, 1);">
      <div id="d-03" class="myContainer" style="width: 55%; height: 70%; transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 422.577, 149.094, 1, 1);">
        <ul id="d-04" class="clientList">
          <li>TEST_X</li>
          <li>TEST_X</li>
          <li>TEST_X</li>
          <li>TEST_X</li>
          <li>TEST_X</li>
          <li>TEST_X</li>
          <li>TEST_X</li>
          <li>TEST_X</li>
          <li>TEST_X</li>
          <li>TEST_X</li>
          <li>TEST_X</li>
          <li>TEST_X</li>
          <li>TEST_X</li>
          <li>TEST_X</li>
          <li>TEST_X</li>
          <li>TEST_X</li>
          <li>TEST_X</li>
          <li>TEST_X</li>
          <li>TEST_X</li>
          <li>TEST_X</li>
          <li>TEST_X</li>
          <li>TEST_X</li>
          <li>TEST_X</li>
          <li>TEST_X</li>
          <li>TEST_X</li>
          <li>TEST_X</li>
          <li>TEST_X</li>
          <li>TEST_X</li>
          <li>TEST_X</li>
          <li>TEST_X</li>
          <li>TEST_X</li>
          <li>TEST_X</li>
          <li>TEST_X</li>
          <li>TEST_X</li>
          <li>TEST_X</li>
          <li>TEST_X</li>
          <li>TEST_X</li>
          <li>TEST_X</li>
          <li>TEST_X</li>
          <li>TEST_X</li>
          <li>TEST_X</li>
          <li>TEST_X</li>
          <li>TEST_X</li>
          <li>TEST_X</li>
        </ul>
      </div>
    </div>
  </div>
</body>

</html>

到目前为止，谢谢你。

IE由于溢出而在错误的位置点击事件：隐藏

0 个答案: