web-dev-qa-db-ja.com

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

ページの要素によってキャプチャされたマウスホイールイベントがスクロールを引き起こさないようにしています。

最後のパラメーターとしてfalseを期待どおりの結果が得られると期待していましたが、この「キャンバス」要素の上でマウスホイールを使用すると、スクロールが発生します。

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

この「キャンバス」要素の外では、スクロールが発生する必要があります。内部では、.wheel()メソッドのみをトリガーする必要があります。何が悪いのですか？

javascriptscrollmousemousewheel
27
Jem

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

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

コメントで指摘されているように、wheelイベントをmousewheelとして使用するように更新されました。

質問は、スクロールが適切なイベントを提供しないようにすることに関するものだったので、ブラウザーのサポート要件を確認して、ニーズに合った適切なイベントを選択してください。

36
GillesC

event.preventDefault() を試して、イベントのデフォルトの動作を防止しましたか？

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

現在、 mouswheel は wheel の代わりに廃止されているので、

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

加えて、canvasはHTML5のみであることを知っているので、これは必要ありませんが、誰かがクロスブラウザ/古いブラウザの互換性を望む場合に備えて、これを使用してください：

/* 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;
});
3
Jorge Fuentes González

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

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