Question

有人知道在更改时阻止页面跳转到输入的方法吗？特别是如果它使用页面上其他位置的标签按钮进行了更改。

此问题会影响IE，Chrome Canary，FireFox以及其他一些其他浏览器，事实上它唯一影响的浏览器是Chrome v28。

通常这会是一个有用的功能，但在我的情况下它非常烦人，我需要一种方法来阻止它/覆盖它。

我尝试用JQuery强制滚动位置：

var labelPos = $(window).scrollTop();
$(window).scrollTop(labelPos);

此解决方案充其量只是错误，导致瞬间页面闪烁。

任何人都有更好的方法吗？

编辑：我想出了一个解决方案：P

$('label').click(function(e) {
    e.preventDefault();
    var For = $(this).attr('for');
    $('#' + For).trigger('click');
});

Answer 1

$('label[for]').on('click', function (e) {
    var target = window[this.htmlFor];
    target.checked = !target.checked;
    e.preventDefault();
});

Answer 2

如果它帮助了其他人......我正在使用"checkbox hack"同时使用复选框和无线电（因此接受的答案对我不起作用）并且我的布局不停跳跃

这对我有用https://codepen.io/allicarn/pen/MOgbpg

在标签的mousedown上，我将隐藏的（和＃34;错位的＆＃34;）输入移动到与标签相同的顶部位置，这样当浏览器自然滚动时，它不会需要去任何地方。

转移到这里，为子孙后代：

＆＃13;

(function() {
  $('label[for]').filter(function() {
    var $input = $(window[this.htmlFor]);
    // Collect the labels whos inputs are offscreen and don't align to them
    return ($input.offset().left < 0) && ($input.offset().top != $(this).offset().top);
  }).on('mousedown.init', function() {
    // Move the input so that it is aligned with the label, to prevent scrolling
    $(window[this.htmlFor]).css({
      'position': 'fixed',
      'top': $(this).offset().top
    });
  });
})();

＆＃13;

* {
  box-sizing: border-box;
}

.container {
  width: 60%;
  max-width: 500px;
  margin: 0 auto;
  padding: 20px;
  border: 3px solid black;
}
.container p:first-child {
  margin-top: 0;
}

input[type="checkbox"],
input[type="radio"] {
  position: absolute;
  left: -10000px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}
input[type="checkbox"][id],
input[type="radio"][id] {
  margin: 0;
}

label[for] {
  display: inline-block;
  cursor: pointer;
  border: 1px solid;
  padding: 10px;
  box-shadow: 1px 1px 2px;
}
label[for]:hover {
  box-shadow: 1px 1px 4px;
}

.label-group {
  display: flex;
  width: 100%;
  margin: 20px 0 0;
}
.label-group label[for] {
  box-shadow: none;
  border-left-width: 0;
}
.label-group label[for]:first-child {
  border-left-width: 1px;
}
.label-group label[for]:hover {
  box-shadow: 1px 1px 4px;
}

.border-control:checked ~ .container {
  border-color: red;
}
.border-control:checked ~ .container .border-control__label {
  background: #ccc;
}

.font-control--red:checked ~ .container {
  color: red;
}
.font-control--red:checked ~ .container .font-control--red__label {
  background: #ccc;
}

.font-control--blue:checked ~ .container {
  color: blue;
}
.font-control--blue:checked ~ .container .font-control--blue__label {
  background: #ccc;
}

.font-control--default:checked ~ .container .font-control--default__label {
  background: #ccc;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" id="hidden1" class="border-control" />

<input type="radio" id="hiddenrad1" name="radioDemo" class="font-control--red" />
<input type="radio" id="hiddenrad2" name="radioDemo" class="font-control--blue" />
<input type="radio" id="hiddenrad3" name="radioDemo" class="font-control--default" checked />

<div class="container">
  
  <!--  Extra stuff to make it scroll  -->
  <div>
    <p>Consectetur consectetur deserunt est nisi irure ut cillum occaecat duis sit est sunt duis eu in in adipisicing non ullamco proident incididunt cupidatat excepteur pariatur cillum nisi excepteur mollit pariatur dolor.</p>
    <p>Cupidatat est dolore minim nulla velit anim in enim sed excepteur eiusmod ut incididunt id veniam ad tempor culpa est consequat quis voluptate duis adipisicing sed ea aliqua.</p>
    <p>Lorem ipsum consectetur magna culpa reprehenderit ut amet laborum esse aute esse quis sint irure cillum aliqua occaecat enim dolor nisi elit id anim velit sed consequat eu exercitation in ex pariatur velit id deserunt aute duis in pariatur mollit.</p>
    <p>Consectetur consectetur deserunt est nisi irure ut cillum occaecat duis sit est sunt duis eu in in adipisicing non ullamco proident incididunt cupidatat excepteur pariatur cillum nisi excepteur mollit pariatur dolor.</p>
    <p>Cupidatat est dolore minim nulla velit anim in enim sed excepteur eiusmod ut incididunt id veniam ad tempor culpa est consequat quis voluptate duis adipisicing sed ea aliqua.</p>
    <p>Lorem ipsum consectetur magna culpa reprehenderit ut amet laborum esse aute esse quis sint irure cillum aliqua occaecat enim dolor nisi elit id anim velit sed consequat eu exercitation in ex pariatur velit id deserunt aute duis in pariatur mollit.</p>
    <p>Consectetur consectetur deserunt est nisi irure ut cillum occaecat duis sit est sunt duis eu in in adipisicing non ullamco proident incididunt cupidatat excepteur pariatur cillum nisi excepteur mollit pariatur dolor.</p>
    <p>Cupidatat est dolore minim nulla velit anim in enim sed excepteur eiusmod ut incididunt id veniam ad tempor culpa est consequat quis voluptate duis adipisicing sed ea aliqua.</p>
    <p>Lorem ipsum consectetur magna culpa reprehenderit ut amet laborum esse aute esse quis sint irure cillum aliqua occaecat enim dolor nisi elit id anim velit sed consequat eu exercitation in ex pariatur velit id deserunt aute duis in pariatur mollit.</p>
    <p>Consectetur consectetur deserunt est nisi irure ut cillum occaecat duis sit est sunt duis eu in in adipisicing non ullamco proident incididunt cupidatat excepteur pariatur cillum nisi excepteur mollit pariatur dolor.</p>
    <p>Cupidatat est dolore minim nulla velit anim in enim sed excepteur eiusmod ut incididunt id veniam ad tempor culpa est consequat quis voluptate duis adipisicing sed ea aliqua.</p>
    <p>Lorem ipsum consectetur magna culpa reprehenderit ut amet laborum esse aute esse quis sint irure cillum aliqua occaecat enim dolor nisi elit id anim velit sed consequat eu exercitation in ex pariatur velit id deserunt aute duis in pariatur mollit.</p>
    <p>Consectetur consectetur deserunt est nisi irure ut cillum occaecat duis sit est sunt duis eu in in adipisicing non ullamco proident incididunt cupidatat excepteur pariatur cillum nisi excepteur mollit pariatur dolor.</p>
    <p>Cupidatat est dolore minim nulla velit anim in enim sed excepteur eiusmod ut incididunt id veniam ad tempor culpa est consequat quis voluptate duis adipisicing sed ea aliqua.</p>
    <p>Lorem ipsum consectetur magna culpa reprehenderit ut amet laborum esse aute esse quis sint irure cillum aliqua occaecat enim dolor nisi elit id anim velit sed consequat eu exercitation in ex pariatur velit id deserunt aute duis in pariatur mollit.</p>
    <p>Consectetur consectetur deserunt est nisi irure ut cillum occaecat duis sit est sunt duis eu in in adipisicing non ullamco proident incididunt cupidatat excepteur pariatur cillum nisi excepteur mollit pariatur dolor.</p>
    <p>Cupidatat est dolore minim nulla velit anim in enim sed excepteur eiusmod ut incididunt id veniam ad tempor culpa est consequat quis voluptate duis adipisicing sed ea aliqua.</p>
    <p>Lorem ipsum consectetur magna culpa reprehenderit ut amet laborum esse aute esse quis sint irure cillum aliqua occaecat enim dolor nisi elit id anim velit sed consequat eu exercitation in ex pariatur velit id deserunt aute duis in pariatur mollit.</p>
    <p>Consectetur consectetur deserunt est nisi irure ut cillum occaecat duis sit est sunt duis eu in in adipisicing non ullamco proident incididunt cupidatat excepteur pariatur cillum nisi excepteur mollit pariatur dolor.</p>
    <p>Cupidatat est dolore minim nulla velit anim in enim sed excepteur eiusmod ut incididunt id veniam ad tempor culpa est consequat quis voluptate duis adipisicing sed ea aliqua.</p>
    <p>Lorem ipsum consectetur magna culpa reprehenderit ut amet laborum esse aute esse quis sint irure cillum aliqua occaecat enim dolor nisi elit id anim velit sed consequat eu exercitation in ex pariatur velit id deserunt aute duis in pariatur mollit.</p>
  </div>
  
  <!--  These labels control inputs all the way at the top of the pen  -->
  <label for="hidden1" class="border-control__label">Change border color</label>
  
  <div class="label-group">
    <label for="hiddenrad1" class="font-control--red__label">Change font to red</label>
    <label for="hiddenrad2" class="font-control--blue__label">Change font to blue</label>
    <label for="hiddenrad3" class="font-control--default__label">Change font to default</label>
  </div>
</div>

＆＃13;

防止标签页面滚动输入

2 个答案: