Geek asks and answers

Event.preventDefault (); don't stop mouse wheel in Firefox

I use mousewheel in jquery to increase the number of divs, the number increases correctly, but scrolling does not stop 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/

The violin uses standard mouse wheel detection, but I also used Brandon Aaron's Mousewheel mouse plugin and it has the same problem.

Removing a line that updates the text (I also tried html ()) div resolves the problem, but this is a key part of the code and cannot be removed.

Does anyone know how to solve this problem?

thank

Update: . I found that the problem occurs when my mouse is located directly above the text, if my mouse is inside the field but not above the text (inside the indentation), scrolling is stopped

+5
6

, , .

, , , mousewheel.

Fiddle: http://jsfiddle.net/rHVUn/9/
( )

+1

$(document).ready(function(){

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

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

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

Firefox, :

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>
Hide result
0

"mousewheel" , ?

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

, ,

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

,

-1
source

More articles:


All Articles