事件处理程序中的警报更改其行为答案

【问题标题】：alert in event handler changing its behaviour事件处理程序中的警报更改其行为
【发布时间】：2019-08-20 07:36:52
【问题描述】：

在下面的 sn-p 中，我有两个 jQueryUI spinner 小部件实例。对于这两者，我已经为spin 事件注册了一个处理程序；第一个，当前值被记录到控制台，第二个，该值被警告。

当第一次使用旋转按钮时，一切都会按预期运行，并且每次单击都会将新值记录到控制台。然而，对于第二个实例，事件处理程序被连续调用并创建了许多警报（直到单击“不允许此页面创建更多弹出窗口”复选框）。奇怪的是，警报值开始上升 1，然后是 2，然后是 3，等等。

我在 Windows 7 Pro SP1 上的 Firefox 68 上看到了这种行为。 IE11 和 Edge 似乎工作正常，但 Chrome 76 具有类似的行为，尽管它只会增加和减少 2。有人可以就可能导致此问题的原因以及如何解决它提供建议吗？

$('#cqty1').spinner().on('spin', function (e, ui) {
  console.log('value is ' + ui.value);
});

$('#cqty2').spinner().on('spin', function (e, ui) {
  alert('value is ' + ui.value);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<link href="https://code.jquery.com/ui/1.12.1/themes/smoothness/jquery-ui.css" rel="stylesheet"/>
<input id="cqty1" value="0" />
<br>
<input id="cqty2" value="0" />

【问题讨论】：

我没有发现问题，但您可以使用 spinstop 并从元素本身而不是函数参数中获取值，而不是 spin：$( "#cqty1" ).spinner().on( "spinstop", function( event, ui ) { alert( $("#cqty1").spinner( "value" )) } );
在第二个处理程序中记录console.log(e) 时，您可以看到每次我在警报提示中按OK 时都会触发原始mousedown 事件，据说我没有找到任何迹象警告功能正在返回任何可能导致这种情况的东西。
@Elias 当我尝试获得“旧”值（预旋转）时。
@empiric 是的；似乎由于某种原因单击确定有效地重新传播了原始旋转事件。但为什么它会停止（最终会停止）？
@Nick jsfiddle.net/063kyc5r 在小提琴中的值是正确的:(

标签： javascript jquery html jquery-ui

【解决方案1】：

我相信这是 jquery spinner 事件的问题。我找不到路低谷。我找到了解决办法。而不是使用“spin”事件，而是使用“stop”事件。

来自： https://api.jqueryui.com/spinner/#event-stop

stop( event, ui )类型：spinstop -> 旋转后触发。

这是我的尝试： https://codepen.io/guymevents/pen/rNBMKzY

这是我的代码笔：

$( function() {
    var spinner1 = $( "#cqty1" ).spinner({
  stop: function (e, ui) {
    console.log('value is ' ,e.delegateTarget.childNodes[0].value);
  }
});


var spinner2 = $( "#cqty2" ).spinner({
  stop: function (e, ui) {
    alert('value is ' + e.delegateTarget.childNodes[0].value);
  }
});

})

【讨论】：

谢谢。如果可以避免，我宁愿不使用它，因为我正在使用spin 事件来潜在地防止旋转发生。