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

Question

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

event.preventDefault() 在工具提示上与 'click' 一起工作正常，但在 'mousedown' 上失败，它触发隐藏 <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>

这是在工具提示上按住鼠标时的样子。单选圈，必须保持不变，但它变成了红色bg颜色...

jsFiddle here

Answer 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>

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

Tooltip nested in <label>, prevent 'mousedown' triggering input:active

html

javascript

css

jquery

frontend