31

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

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

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

この「canvas」要素の外側で、スクロールを実行する必要があります。内部では、.wheel()メソッドをトリガーするだけで済みます。私は何が間違っているのですか？

4

6 に答える 6

45

falseこれを行うには、ハンドラー (OG) の最後に戻ります。

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

または使用してevent.preventDefault()

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

コメントで指摘されているように、最新のブラウザーでは非推奨としてwheelイベントを使用するように更新されました。mousewheel

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

よりモダンなアプローチ オプションで 2 度目の更新。

于 2012-04-25T09:48:37.827 に答える
28

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);
于 2012-04-25T09:47:08.643 に答える
3

追加するだけで、キャンバスは 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;
});
于 2014-11-19T18:50:01.270 に答える
1

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

this.canvas.onmousewheel = function(ev){
    //perform your own Event dispatching here
    return false;
};
于 2012-05-31T11:09:04.197 に答える