event.preventDefault(); non fermando la rotellina del mouse in Firefox

Question

Sto usando la rotellina del mouse in jquery per aumentare il numero di un div, il numero aumenta correttamente ma lo scorrimento non viene fermato in Firefox.

$(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/

il violino utilizza il rilevamento rotella del mouse standard, ma ho usato anche plug-rotella del mouse di Brandon Aaron ed ha lo stesso problema.

Rimuovere la riga che aggiorna il testo (ho anche provato html()) del div per risolvere il problema, ma questa è una parte cruciale del codice e non può essere rimossa.

Qualcuno sa come risolvere questo problema?

Grazie

Update: ho trovato il problema si verifica solo quando il mio mouse si trova direttamente sopra il testo, se il mio mouse è all'interno della scatola, ma non sul testo (entro l'imbottitura) il rotolo è fermo

Answer 1

Ho trovato una soluzione al mio problema, non può essere il modo migliore per farlo, ma Funziona.

Ho trovato che il problema si verifica solo quando il mio mouse è posizionato direttamente sul testo durante lo scorrimento, quindi ho aggiunto un elemento di sovrapposizione e lo uso come trigger della rotellina del mouse.

Fiddle: http://jsfiddle.net/rHVUn/9/
(Il colore di sfondo non è necessaria)

Answer 2

Hai provato a legare l'evento 'mousewheel' invece di quello che hai? :

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

ho adattato il vostro violino e sembra funzionare

Answer 3

provare questo

$(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(); 
       } 
      }) 

Utilizzare questo, invece, che lavora per me

Answer 5

Questo funziona bene su Chrome, Firefox versioni lattest e IE, 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

Questo è ancora uno dei primi messaggi quando cerco il problema dello scorrimento di Firefox nonostante prevenga l'evento di scorrimento.

Firefox attiva due eventi sullo scorrimento del mouse: DOMMouseScroll e MozMousePixelScroll. Vedere https://github.com/jquery/jquery-mousewheel/issues/45#issuecomment-11749359 È necessario prevenire l'evento MozMousePixelScroll.

Secondo https://developer.mozilla.org/en-US/docs/Web/Events/MozMousePixelScroll il nome dell'evento più moderno è wheel, che sembra funzionare con la mia versione di Firefox (55) e Chrome (61). Probabilmente questo è quello che dovresti usare.Vedi https://developer.mozilla.org/en-US/docs/Web/API/WheelEvent/WheelEvent

Ecco un JSFiddle:

https://jsfiddle.net/ahpy9f66/