嵌套在 <label> 中的工具提示，防止 'mousedown' 触发 input:active答案

【问题标题】：Tooltip nested in <label>, prevent 'mousedown' triggering input:active嵌套在 <label> 中的工具提示，防止 'mousedown' 触发 input:active
【发布时间】：2017-05-16 14:33:07
【问题描述】：

我有一个特定的情况，我们将工具提示嵌套在 <label> 中（我们用于实现自定义单选按钮设计）。

event.preventDefault() 可以在工具提示上的“单击”上正常工作，但在“鼠标按下”时会失败，它会触发隐藏的 <input> 字段的 :active 状态。从而改变了假单选按钮的样式。

我做了一个小例子来演示发生了什么。

const $tooltipElement = $('.tooltip');
$tooltipElement.on('click', (event) => {
	event.preventDefault();
})

label {
  position: relative;
  display: inline-block;
  margin-right: 10px;
}

input {
  opacity: 0;
  left: 0;
  position: absolute;
  overflow: hidden;
  pointer-events: none;
}

.box {
  width: 15px;
  height: 15px;
  border-radius: 50%;
  border: 1px solid gray;
  display: inline-block;
  cursor: pointer;
}

input:checked+.box {
  background: blue;
}

input:active+.box {
  background: red;
}

.text {
  cursor: pointer;
}

.tooltip {
  display: inline-block;
  width: 8px;
  height: 8px;
  border: 2px solid red;
}

.tooltip:active {
  background: gray;
}

.tooltip:active::before {
  content: attr(data-content);
  position: absolute;
  width: 100px;
  height: 80px;
  background-color: #fff;
  text-align: center;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label>
  <input type="radio" name="radio">
  <span class="box"></span>
  <span class="text">Option 1</span>
  <span class="tooltip" data-content="Message 1" tab-index="0"></span>
</label>

<label>
  <input type="radio" name="radio">
  <span class="box"></span>
  <span class="text">Option 2</span>
  <span class="tooltip" data-content="Message 2" tab-index="0"></span>
</label>

这是在工具提示上按住鼠标时的外观。无线电圈，必须保持不变，但它会变成红色的背景颜色...

jsFiddle here

【问题讨论】：

为什么不直接删除活动的 css？
遗憾的是我们需要它，设计需要它。最初，不需要嵌套在标签中的工具提示，它工作正常。
你考虑过只用 JS 实现所有的样式吗？我不认为你想要的只是 :active 和其他东西。
为什么不把工具提示移到标签外——如果我点击一个信息框，我不希望它同时检查那个选项
我们正在实施原子设计方法。其中工具提示和单选按钮是 2 个独立的组件。这使得我们不能从工具提示访问单选按钮，反之亦然......这使得它更难:)。来自 JS 的样式也是最后的解决方案，我想避免它。

标签： javascript jquery html css frontend

【解决方案1】：

这是怎么回事：不是将工具提示放在标签中，而是将它放在包装标签和工具提示的跨度中（将标签样式移动到此跨度）：

const $tooltipElement = $('.tooltip');
$tooltipElement.on('click', (event) => {
  event.preventDefault();
})

.wrapper {
  position: relative;
  display: inline-block;
  margin-right: 10px;
}

input {
  opacity: 0;
  left: 0;
  position: absolute;
  overflow: hidden;
  pointer-events: none;
}

.box {
  width: 15px;
  height: 15px;
  border-radius: 50%;
  border: 1px solid gray;
  display: inline-block;
  cursor: pointer;
}

input:checked+.box {
  background: blue;
}

input:active+.box {
  background: red;
}

.text {
  cursor: pointer;
}

.tooltip {
  display: inline-block;
  width: 8px;
  height: 8px;
  border: 2px solid red;
}

.tooltip:active {
  background: gray;
}

.tooltip:active::before {
  content: attr(data-content);
  position: absolute;
  width: 100px;
  height: 80px;
  background-color: #fff;
  text-align: center;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span class="wrapper">
  <label>
    <input type="radio" name="radio">
    <span class="box"></span>
    <span class="text">Option 1</span>
  </label>
  <span class="tooltip" data-content="Message 1" tab-index="0"></span>
</span>

<span class="wrapper">
  <label>
    <input type="radio" name="radio">
    <span class="box"></span>
    <span class="text">Option 2</span>
  </label>
  <span class="tooltip" data-content="Message 2" tab-index="0"></span>
</span>

【讨论】：

谢谢你，Pete，我会在外面的环境中测试一下，如果合适就接受答案:)