防止mouseup事件多次触发

Question

我已经阅读了有关类似问题的先前几个问题，并且已经认为我已经收集到了通过多个DOM项传播的问题，但是我仍然发现，当释放我的jquery滑块后，甚至在mouseup触发时，我的Ajax也会被触发多次。

我尝试过的代码如下。 谁能看到明显的东西并解释为什么我包含的传播语句不起作用？ 我已经尝试过e.stopPropagation(); 在多个地方排队。

        $('#slider-range').mousedown(function(e) {

                $('#slider-range').one('mouseup', function() {
                        e.stopPropagation();        
                    $("#"+pupil).css("visibility","hidden");
                    $( "img[name='save"+pupil+"']" ).show();


                                $.ajax(
                                {
                                    type: "POST", 
                                    url: "readingAgeAjax.php",
                                    data: (
                                    {
                                        "type": "saveReadingAge",
                                        "readingAge": $('#hiddenSpan'+pupil).html(),
                                        "pupilID": pupil
                                    }), 

                                    success: function(response)
                                    {   
                                        $( "img[name='save"+pupil+"']" ).hide();                
                                    }
                                });




                        });
                     return false;
                });

Answer 1

目前尚不清楚您要如何使用滑块。 您基本上表示您想这样做：

 $(function() { $('#slider-range').mousedown(function(e) { var myEvent = e; console.log("mousedown", myEvent); $('#slider-range').one('mouseup', function(e) { myEvent.stopPropagation(); console.log("mouseup", e); }); return false; }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="slidecontainer"> <input type="range" min="1" max="100" value="50" class="slider" id="slider-range"> </div> 

这建议您要在mouseup事件期间停止mousedown事件。 不确定这将如何帮助。

由于您需要通过AJAX发送和接收数据，因此我将等到用户完成幻灯片事件，然后再通过AJAX发送该值。 因此，要么寻找滑行停止，更改或鼠标悬停，然后发送数据。

 $(function() { $('#slider-range').on("mousedown mouseup", function(e) { console.log(e); if (e.type == "mouseup") { console.log($(this).val()); } }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="slidecontainer"> <input type="range" min="1" max="100" value="50" class="slider" id="slider-range"> </div> 

Answer 2

我认为您错过了在功能参数中添加e

$（'＃slider-range'）。one（'mouseup'，function（e）{

同时检查您的控制台是否有错误