event.preventDefault(); nicht stoppen Mausrad in Firefox

Question

Ich benutze das Mausrad in jQuery, um die Zahl eines div zu erhöhen, erhöht sich die Zahl richtig, aber die Schriftrolle ist nicht in Firefox gestoppt.

$(document).ready(function(){ 

    $('#test').bind('mousewheel DOMMouseScroll', function(event){ 

     var currentValue = parseInt($('#test').text(),10), 
      newValue = currentValue + 1; 

     $('#test').text(newValue);  
     event.preventDefault(); 
    }); 
}); 

Fiddle: http://jsfiddle.net/rHVUn/

Die Geige verwendet die Standard-Mausrad-Erkennung, aber ich habe auch Brandon Aarons Mausrad-Plugin, und es hat das gleiche Problem verwendet.

Entfernen der Zeile, die den Text aktualisiert (Ich habe auch versucht, html()) der Div das Problem löst, aber das ist ein entscheidender Teil des Codes und kann nicht entfernt werden.

Kann jemand dieses Problem lösen?

Danke

Update: Ich habe das Problem nur gefunden tritt auf, wenn meine Maus direkt über den Text positioniert ist, wenn die Maus in der Box, aber nicht über den Text (innerhalb der Polsterung) die Scroll ist gestoppt

Answer 1

ich eine Lösung für mein Problem gefunden haben, zu arbeiten, ist es nicht der beste Weg sein kann, dies zu tun, aber Es klappt.

Ich stellte fest, das Problem tritt nur auf, wenn meine Maus während des Scrollens direkt über dem Text positioniert ist, also fügte ich ein überlagerndes Element hinzu und benutzte das als Mausrad-Auslöser.

Fiddle: http://jsfiddle.net/rHVUn/9/
(Die Hintergrundfarbe ist nicht erforderlich)

Answer 2

Haben Sie versucht, "Mausrad" -Ereignis zu binden, anstatt was Sie haben? :

$('#test').bind('mousewheel', function(event){ ... 

ich Ihre Geige angepasst und so scheint es,

Answer 3

versuchen diese

$(document).ready(function(){ 

    $('#test').bind('mousewheel DOMMouseScroll', function(event){ 

     var currentValue = parseInt($('#test').text(),10), 
      newValue = currentValue + 1; 

     $('#test').text(newValue);  
     return false; 
    }); 
}); 

Answer 4

$('#objectId').on({ 
      'mousewheel': function(e) {     
       e.preventDefault(); 
       e.stopPropagation(); 
       } 
      }) 

verwenden statt, was für mich funktioniert

Answer 5

Dieses auf Chrome, Firefox lattest Versionen und IE funktioniert gut, Try this:

document.onmousewheel = function(){ stopWheel(); } /* IE7, IE8 */ 
 
if(document.addEventListener){ /* Chrome, Safari, Firefox */ 
 
    document.addEventListener('DOMMouseScroll', stopWheel, false); 
 
} 
 
    
 
function stopWheel(e){ 
 
    if(!e){ e = window.event; } /* IE7, IE8, Chrome, Safari */ 
 
    if(e.preventDefault) { e.preventDefault(); } /* Chrome, Safari, Firefox */ 
 
    e.returnValue = false; /* IE7, IE8 */ 
 
}

div { 
 
    float:left; 
 
    width:25px; 
 
    height:25px;; 
 
    text-align:center; 
 
    margin:5px; 
 
    padding:5px; 
 
    border:1px solid #bbb; 
 
} 
 
#test_ov { 
 
    position:absolute; 
 
    background:rgba(45,65,40,0.3); 
 
}

<div style="height:900px; border:0;"> 
 
    <div id="test">0</div> 
 
    <span id="test_ov"></span> 
 
</div>

Answer 6

Dies ist immer noch einer der Top-Beiträge, wenn ich nach dem Problem von Firefox Scrolling Suche trotz der Scroll-Ereignis suchen.

Firefox löst beim Maus-Scroll zwei Ereignisse aus: DOMMouseScroll und MozMousePixelScroll. Siehe https://github.com/jquery/jquery-mousewheel/issues/45#issuecomment-11749359. Das Ereignis MozMousePixelScroll muss verhindert werden.

Laut https://developer.mozilla.org/en-US/docs/Web/Events/MozMousePixelScroll ist der modernste Ereignisname wheel, der mit meiner Version von Firefox (55) und Chrome (61) zu funktionieren scheint. Wahrscheinlich sollten Sie das verwenden.Siehe https://developer.mozilla.org/en-US/docs/Web/API/WheelEvent/WheelEvent

hier ein JSFiddle:

https://jsfiddle.net/ahpy9f66/