Question

我有一个逃避onChange（）事件的发生，我似乎无法弄清楚如何阻止它。

这是我的HTML：

<input id="language_french" type="text"
  name="french"
  data-provide="slider"
  data-slider-ticks="[0,1,2]"
  data-slider-min="0"
  data-slider-max="2"
  data-slider-step="1"
  data-slider-precision="0"
  data-slider-value="1"
  data-slider-tooltip="show"
  data-identifier="001^023"
/>

这是我的CSS：

div#fixBootstrapSliderPluginStyles div.slider.slider-horizontal { margin-bottom: 20px !important; }
div#fixBootstrapSliderPluginStyles div.slider.slider-horizontal div.slider-tick-label-container { margin-left: -52.5px !important; }
div#fixBootstrapSliderPluginStyles div.slider.slider-horizontal div.slider-tick-label-container div.slider-tick-label { width: 105px !important; }

这是我的JavaScript：

$("#language_french").on( 'change', function( value ) { alert("clicked"); } );

这是我的jsFiddle： https://jsfiddle.net/21L9zLy7/

首次单击滑块时，事件将触发。但它继续激发所有鼠标移动。有什么想法吗？

Answer 1

当鼠标悬停在控件上时，控件仍然认为您正在更改其值。这是因为警报偷走了焦点，并且它不知道鼠标按钮没有关闭。不要使用警报，而是使用控制台

console.log("clicked");

Answer 2

这可能有点明显，所以我不愿意假设这是一个答案，但似乎它正在激活一个“改变”。而不是点击事件。这是你的意思吗？

Answer 3

请参阅提琴手源代码供您参考 https://jsfiddle.net/rj1405/21L9zLy7/5/

正如我的@Musa解释的那样，在鼠标移动时，滑块仍然具有焦点。因此，将显示警报并将运行任何代码段。

您可以通过 slideStop 和 slideStart 事件获得更多控制权。

slideStop：为您提供新值。

slideStart：为您提供旧值（起点）。

可以通过

访问值

**$('#language_french').data('slider').getValue();**

Bellow是源代码。 请注意，某些外部库未加载，因此可能无法执行。

$('#language_french').slider().on('slideStart', function(ev){
    originalVal = $('#language_french').data('slider').getValue();
});

$('#language_french').slider().on('slideStop', function(ev){
    var newVal = $('#language_french').data('slider').getValue();
    alert(newVal);
    
});

div#fixBootstrapSliderPluginStyles div.slider.slider-horizontal { margin-bottom: 20px !important; }
div#fixBootstrapSliderPluginStyles div.slider.slider-horizontal div.slider-tick-label-container { margin-left: -52.5px !important; }
div#fixBootstrapSliderPluginStyles div.slider.slider-horizontal div.slider-tick-label-container div.slider-tick-label { width: 105px !important; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="language_french" type="text"
  name="french"
  data-provide="slider"
  data-slider-ticks="[0,1,2]"
  data-slider-min="0"
  data-slider-max="2"
  data-slider-step="1"
  data-slider-precision="0"
  data-slider-value="1"
  data-slider-tooltip="show"
  data-identifier="001^023"
/>

如何在jQuery中停止onChange事件

3 个答案: