防止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）{

同時檢查您的控制台是否有錯誤