工具提示嵌套在<label>中，防止＆＃39; mousedown＆＃39;触发输入：激活

Question

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

event.preventDefault（）可以正常使用＆＃39;点击＆＃39;在工具提示上但未能完成＆＃39; mousedown＆＃39;它触发隐藏:active字段的<input>状态。从而改变了假单选按钮的样式。

我做了一个小例子来证明正在发生的事情。

＆＃13;

＆＃13;

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

＆＃13;

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%);
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

这是在工具提示上持有mousedown时的样子。无线电圈，必须保持不变，但它会变为红色bg颜色......

jsFiddle here

Answer 1

这是怎么回事：不是将工具提示放在标签中，而是将其放在一个包含标签和工具提示的范围内（将标签样式移动到此范围）：

＆＃13;

＆＃13;

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

＆＃13;

.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%);
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;