javascript - 选择一个重叠的 div

Question

我有重叠的侧边选项卡。我希望能够单击一个并用它执行某些操作，但我无法让我的事件处理程序注册正确的 div。

<div class="tabs">
  <div class="blueTab">
    <div class="blueTab__container">

    </div>
  </div>

  <div class="brownTab">
    <div class="brownTab__container">

    </div>
  </div>
</div>

.tabs {
  position: relative;
  margin-left: 853px;
}

.brownTab {
  position: absolute;
  .brownTab__container {
    background-image: url(https://i.imgur.com/Fd49HkH.png) !important;
    background-repeat: no-repeat !important;
    width: 400px;
    height: 853px;
  }
}

.blueTab {
  position: absolute;
  .blueTab__container {
    background-image: url(https://i.imgur.com/F5qg6xo.png) !important;
    background-repeat: no-repeat !important;
    width: 400px;
    height: 873px;
  }
}

let brownTabElement = document.getElementsByClassName('brownTab')[0]
let blueTabElement = document.getElementsByClassName('blueTab')[0]


brownTabElement.addEventListener('click', brownTabHandler, false)

blueTabElement.addEventListener('click', blueTabHandler, false)

function brownTabHandler() {
    alert('brownTab')
}

function blueTabHandler() {
    alert('blueTab')
}

当我同时单击蓝色或棕色选项卡时，只有棕色选项卡的事件处理程序被调用。我该如何解决这个问题？

https://jsfiddle.net/Le80rvL0/3/

Answer 1

您的问题是，即使您可以看到两个选项卡(因为它们的背景部分透明)，.brownTab__container 元素仍与 .blueTab__container 重叠，因为它们位于完全相同的位置，因此您始终单击该位置。您可以使用开发人员工具的检查器来查看。

解决您的问题的一种方法是实际创建看起来像选项卡的不同的、不重叠的元素。也许像 this或类似this .

另一种解决方案可能是使用单个 HTML 元素和所有选项卡的单个背景图像，获取单击像素的颜色并用它来区分单击的选项卡。像这样的事情:

const message = document.getElementById('message');

// Get the tabs element:
const tabs = document.getElementById('tabs');

// Get its computed styles:
const style = window.getComputedStyle(tabs);

// Extract the background-image's url:
const backgroundImage = style.getPropertyValue('background-image');
const url = backgroundImage.substring(5, backgroundImage.length - 2);

// Create an image with that url:
const img = document.createElement('IMG');
img.src = url;

// Create a canvas with the original size of the image:
const canvas = document.createElement('CANVAS');
const width = canvas.width = 1;
const height = canvas.height = 123;

//  Draw that image on it:
canvas.getContext('2d').drawImage(img, 0, 0, width, height);

// Listen for click events:
document.getElementById('tabs').addEventListener('click', (e) => {

  // Get clicked pixel's RGBA value, taking into account the image on the tabs element is
  // repeated, while the one on the canvas it's not:
  
  const rgba = canvas.getContext('2d').getImageData(e.offsetX % width, e.offsetY % height, 1, 1).data;
  
  // Set color thresholds for each tab (as in your images the colors are not uniform as
  // they are here:
  
  if (rgba[2] > 200) {
    message.innerText = 'You clicked the blue tab.';
  } else if (rgba[2] < 150 && rgba[1] > 50) {
    message.innerText = 'You clicked the brown tab.';
  } else if (rgba[1] > 200) {
    message.innerText = 'You clicked the gold tab.';
  } else if (rgba[1] < 50) {
    message.innerText = 'You clicked the purple tab.';
  } else {
    message.innerText = 'Unknown tab clicked.';
  }
 
});

body {
  position: relative;
  margin: 0;
  height: 800px;
}

#message {
  position: fixed;
  top: 0;
  left: 0;
  right: 90px;
  padding: 16px;
  font-size: 32px;
}

#tabs {
  position: absolute;
  width: 90px;
  height: 100%;
  top: 0;
  right: 0;
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAB7CAYAAAC1rOouAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAAqSURBVChTYzAOPfN/kBJnGtIGK/H+yYbBSpzRBjkSRNzUTkfmDhyR9h8AMPtPIMUTD3YAAAAASUVORK5CYII=);
}

<div id="message"></div>
<div id="tabs"></div>

请记住，使用第一种方法可以更轻松地添加其他效果和功能，例如悬停/事件/焦点样式、添加/删除选项卡、移动选项卡、拖动选项卡...