Javascript：マウスホイールのイベントをキャプチャし、ページをスクロールしませんか？

Question

私は、ページの要素によってキャプチャされたマウスイベントをスクロールさせないようにしようとしています。

私は期待どおりの結果を持っているために、最後のパラメータとして「false」に期待が、この「キャンバス」の要素の上にマウスホイールを使用すると、まだスクロール原因：この「キャンバス」要素の外

this.canvas.addEventListener('mousewheel',function(event){mouseController.wheel(event)}, false); 

、スクロールを起こる必要があります。内部では、.wheel（）メソッドだけをトリガする必要があります。 私は何が間違っていますか？

ありがとうございます！ J.

Answer 1

ハンドラーの最後にfalseを返すことで、これを行うことができます。

this.canvas.addEventListener('mousewheel',function(event){ 
    mouseController.wheel(event); 
    return false; 
}, false); 

Answer 2

event.preventDefault()を試しましたか？

this.canvas.addEventListener('mousewheel',function(event){ 
    mouseController.wheel(event); 
    event.preventDefault(); 
}, false); 

Answer 3

この種のキャンセルは、新しいChrome> 18ブラウザ（および他のWebKitベースのブラウザ）では無視されるようです。排他的にイベントをキャプチャするには、要素のonmousewheelメソッドを直接変更する必要があります。

this.canvas.onmousewheel = function(ev){ 
    //perform your own Event dispatching here 
    return false; 
}; 

Answer 4

はちょうど私はキャンバスがそう、これは必要ありません唯一のHTML5ですが、念のため、誰かがcrossbrowser/oldbrowser互換性を望んでいることを知って、追加して、これを使用する：

/* To attach the event: */ 
addEvent(el, ev, func) { 
    if (el.addEventListener) { 
     el.addEventListener(ev, func, false); 
    } else if (el.attachEvent) { 
     el.attachEvent("on" + ev, func); 
    } else { 
     el["on"+ev] = func; // Note that this line does not stack events. You must write you own stacker if you don't want overwrite the last event added of the same type. Btw, if you are going to have only one function for each event this is perfectly fine. 
    } 
} 

/* To prevent the event: */ 
addEvent(this.canvas, "mousewheel", function(event) { 
    if (!event) event = window.event; 
    event.returnValue = false; 
    if (event.preventDefault)event.preventDefault(); 
    return false; 
});