通过 mousedown（拖动）输入更改值在 Chrome 中不起作用

Question

只有当点击按下并从上到下移动时才会增加或减少，这是正常操作。 我有这个脚本允许从输入增量和减量值拖动，这在 Firefox 中运行良好，但在 Chrome 中无法正常运行，任何人都可以纠正这个错误（在 Chrome 中）？

我的脚本也有问题。它只在 Firefox 中有效，但在 Chrome 中不一样。

示例：http://jsfiddle.net/iLen/bacx5qem/

视频：http://recordit.co/yW1NUPrXBP（左：chrome / 右：firefox）

var clicking = false;
$('.vamoAlSubibaja').mousedown(function() {
  clicking = true;  
});

$(document).mouseup(function() {
  clicking = false;  
})
var i = 0;
var y = 0;
$('.vamoAlSubibaja').mousemove(function(my) {
  if (clicking == false) {
    return
  } else {
    // change value
    if (my.pageY <= $(this).offset().top + $('.vamoAlSubibaja').css('width').replace('px', '') / 10) {
      y = parseInt($(this).val()) + 1;
      $('.movestatus').text('plus');
    } else {
      y = parseInt($(this).val()) - 1;
      $('.movestatus').text('minus');
    }
    $(this).val(parseInt(y));    
    i++;
  } 
});

Answer 1

它不起作用，因为您将 mousemove 事件分配给 div，而不是文档。

如果您希望每个 div 独立响应，您需要为变量分配一个值以了解哪个被点击了。这样，当鼠标移动时（在单击其中一个 div 之后），您可以将您的功能分配给该特定 div。

此演示仅修复 mousemove，以便您了解如何解决主要问题。

var clicking = false;
$('.vamoAlSubibaja').mousedown(function() {
  clicking = true;
});

$(document).mouseup(function() {
  clicking = false;
})
var i = 0;
var y = 0;
$(document).mousemove(function(my) {
  if (clicking == false) {
    return
  } else {
    // change value
    if (my.pageY <= $('.vamoAlSubibaja').offset().top + $('.vamoAlSubibaja').css('width').replace('px', '') / 10) {
      y = parseInt($('.vamoAlSubibaja').val()) + 1;
      $('.movestatus').text('plus');
    } else {
      y = parseInt($('.vamoAlSubibaja').val()) - 1;
      $('.movestatus').text('minus');
    }
    $('.vamoAlSubibaja').val(parseInt(y));
    i++;
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<i>Only when the mouse moves up and down does
    the value change from the input
    (validate min y max)</i>
<br />
<br />
<br />
<br />
<br />
<input type="text" value="5" class="vamoAlSubibaja" id="change_value_up_down" />
<input type="text" value="5" class="vamoAlSubibaja" id="change_value_up_down2" />

<!-- only ref -->
<span class="clickstatus"></span>
<span class="movestatus"></span>

Answer 2

根据官方DOM Level 3 documentation

在某些实现环境中，例如浏览器，如果用户开始拖动操作（例如，按下鼠标按钮）并且定点设备已离开用户代理的边界，则 mousemove 事件可以继续触发。

在这种情况下，当鼠标离开input 限制时，Firefox 会继续触发 mousemove 事件，而 Chrome 不会。这就是为什么您应该遵循@Alvaro 的解决方案作为参考并使用document 而不是input。

请记住

鼓励实施确定最佳频率，以平衡响应能力和性能。

所以不同浏览器的效果看起来不会完全相同。