Question

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

即使使用脚本，我也遇到了问题。它只适用于Firefox，但在Chrome中不起作用。

视频：http://recordit.co/yW1NUPrXBP（左：chrome / right：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。

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

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

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

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

请记住

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

因此，不同浏览器的效果看起来不一样。

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

2 个答案: