如何在 jQuery 中停止 onChange 事件

Question

我有一个运行 away 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

这可能有点明显，所以我犹豫是否认为这是一个答案，但它似乎是在 'change' 而不是点击事件上激活的。这是你的意思吗？

Answer 3

请找到fiddler源代码供您参考https://jsfiddle.net/rj1405/21L9zLy7/5/

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

您将通过事件 slideStop 和 slideStart.

获得更多控制权

slideStop : 给你新的值。

slideStart : 给你旧值（起点）。

可以通过

访问值

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

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

$('#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 事件

How to stop an onChange event in jQuery

javascript

jquery

onchange