使用突变处理器预防多个事件

Question

我想根据进度（25％，50％，75％和100％）跟踪输入的动态值和触发事件。就我而言，输入是进度栏： progress bar

这是HTML代码，知道Aria-Valuetext是HTML代码动态：

<input tabindex="0" type="range" aria-hidden="false" aria-label="slide progress" aria-valuetext="30%">

为此，我使用突变处理器接口：

//Select the target node
const target = document.querySelector("[aria-valuetext]");
//create an observer instance
const observer = new MutationObserver(function(mutations, e){
    let videoProgress = Math.round($("[aria-valuetext]").val()/1000);
    if(videoProgression == 25){console.log('Progression:', videoProgression);
        console.log('Video action: Progression 25%');}
    if(videoProgression == 50){console.log('Progression:', videoProgression);
        console.log('Video action: Progression 50%');}
    if(videoProgression == 75){console.log('Progression:', videoProgression);
        console.log('Video action: Progression 75%');}
    if(videoProgression == 100){console.log('Progression:', videoProgression);
        console.log('Video action: Progression 100%');}
});
const config = {attributes: true, childlist: true, characterData: true};
observer.observe(target, config);

我的问题是事件被多次触发。我试图使用预防违规和停止中间propagation，而没有任何结果。

Answer 1

您为什么不想使用onChange或oninput事件跟踪输入值？

MutationObserver似乎有点过大，并打算在每个DOM突变上发射一个事件。您可以停止使用其方法，然后使用.observe（）方法再次开始观察。

您可以对您的要求添加更多澄清吗？您要解决哪个问题？