javascript - Firefox：禁用具有 webshim 回退的 HTML5 日期输入的滚动

Question

我试图在 HTML5 日期输入上禁用滚动但没有成功。
这个输入有一个 webshim 后备，这导致我的 JS 可以与 Chrome 一起使用，但不能与 Firefox 一起使用。

$('.input-date input').on('mousewheel', function (event) {
  event.preventDefault();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery-mousewheel/3.1.12/jquery.mousewheel.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/webshim/1.15.6/dev/polyfiller.js"></script>

<script type="text/javascript">
  webshims.cfg.no$Switch = true;
  webshim.setOptions({
    'forms-ext': {
      widgets: {
        calculateWidth: false
      }
    }
  });
  webshim.polyfill('forms forms-ext');
</script>

<form>
  <div class="input-date">
    <input type="date" value="2015-02-24">
  </div>
</form>

有没有人遇到过这个问题？

Answer 1

我有机会和 webshim 的作者讨论了这个问题，发现有一个选项可以避免这种问题：noSpinbtn.

因此，代码将如下所示：

$('.input-date input').on('mousewheel', function (event) {
  event.preventDefault();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery-mousewheel/3.1.12/jquery.mousewheel.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/webshim/1.15.6/dev/polyfiller.js"></script>

<script type="text/javascript">
  webshims.cfg.no$Switch = true;
  webshim.setOptions({
    'forms-ext': {
      widgets: {
        calculateWidth: false
      },
      date: {
        noSpinbtn: true
      }
    }
  });
  webshim.polyfill('forms forms-ext');
</script>

<form>
  <div class="input-date">
    <input type="date" value="2015-02-24">
  </div>
</form>