时间戳

首页 > 解决方案 > div 内的输入事件与标签内的输入事件的作用不同

html - div 内的输入事件与标签内的输入事件的作用不同

问题描述

这很奇怪，但我相信有一个简单的解释。有人可以向我解释为什么 div 中的输入事件与标签中的输入事件的行为不同。请参阅以下小提琴作为示例：

https://jsfiddle.net/anthill/h8v106o7

$('#container .switch input[type="checkbox"]').change(function(e) {
  alert($(this).data('message'));
})
body {
  font-family: Helvetica, Arial, sans-serif;
  padding: 10px;
}
h5 {
  margin-bottom: 0.5em;
}
.switch {
  background-color: #fff;
  border: 1px solid #999;
  border-radius: 2px;
  color: #fff;
  cursor: pointer;
  display: inline-block;
  font-size: 0;
  height: 34px;
  overflow: hidden;
  margin: 0;
  padding: 0;
  position: relative;
  width: 80px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
}
.switch:after, .switch:before {
  background-color: #9bca3e;
  color: #fff;
  content: "On";
  display: block;
  font-size: 13px;
  line-height: 1.5;
  height: 100%;
  left: 0;
  padding: 7px 0;
  position: absolute;
  text-align: center;
  top: 0;
  width: 51%;
  /* This is so the darker color doesn't show through the rounded corners of the knob */
}
.switch:before {
  background-color: #999;
  content: "Off";
  left: auto;
  right: 0;
  width: 50%;
}
.switch .knob {
  background: #f7f7f7;
  border: 1px solid #999;
  border-bottom: none;
  border-top: none;
  border-radius: 2px;
  display: block;
  font-size: 13px;
  height: 100%;
  left: -1px;
  position: relative;
  top: 0;
  width: 40px;
  z-index: 2;
  -webkit-transition: all 0.15s ease;
  -moz-transition: all 0.15s ease;
  -ms-transition: all 0.15s ease;
  transition: all 0.15s ease;
}
.switch .knob:before, .switch .knob:after {
  border: 4px solid transparent;
  border-left-color: inherit;
  content: "";
  display: block;
  height: 0;
  left: 50%;
  margin-left: 2px;
  margin-top: -3px;
  position: absolute;
  top: 50%;
  width: 0;
}
.switch .knob:before {
  border-left-color: transparent;
  border-right-color: inherit;
  margin-left: -10px;
}
.switch input {
  position: absolute;
  visibility: hidden;
}
.switch input:checked + .knob {
  left: 50%;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="container">
  <label class="switch">
    <input type="checkbox" checked data-message="Checkbox 1"/>
    <span class="knob"></span>
  </label>
  <div class="switch">
    <input type="checkbox" checked data-message="Checkbox 2" />
    <span class="knob"></span>
  </div>
</div>

change 事件在第一个复选框上触发良好，但在第二个复选框上完全触发。是否与在隐藏输入上共享事件的标签有关，而 div 不这样做？

标签： htmljquery

解决方案

在这里测试：https ://jsfiddle.net/Twisty/947vsjpa/5/

您可以看到 Click 事件发生在 Switch & Knob 上，但不在 Input 上。该label元素与 有关系input。标签上的点击事件可以影响输入的状态。div没有这种关系；因此，点击事件不会到达不可见元素。

你想如何解决这个问题？两者都使用标签元素？捕获点击事件.switch，然后触发输入的点击。

考虑以下内容：https ://jsfiddle.net/Twisty/947vsjpa/18/

JavaScript

$(function() {
  $('#container .switch').click(function(event) {
    console.log(event.type, event.target);
    event.preventDefault();
    var $input = $("input[type='checkbox']", this)
    $input.prop("checked", !$input.prop("checked"));
    alert($input.data("message"));
  });
});

这会更改属性，即使它不可见且无法单击。

推荐阅读