1

潜在的な解決策を見つけましたが、うまくいかないようです。

$('svg')
  .on("mousewheel.zoom", null)
  .on("DOMMouseScroll.zoom", null) // disables older versions of Firefox
  .on("wheel.zoom", null);

問題は、クリック イベントでマップが再描画されることです。場合によっては、ズーム イベントが初期化されていませんが、スクロールは SVG 要素上でキャプチャされます。スクロールが「キャプチャ」されると、ページがスクロールできなくなります (これは望ましい動作ではありません)。スクロール イベントのキャプチャをプログラムで無効にして SVG をズームする方法はありますか?

D3 はオンザフライでバインドしているようで、バインドを極端に明示的に中断しようとさえしました。

$('.map-container, #map, g, svg, d3, div').off('scroll').unbind('scroll').undelegate('scroll');
$(window).off('scroll').unbind('scroll').undelegate('scroll');
$(document).off('scroll').unbind('scroll').undelegate('scroll');

これは、バインディングなどに関する私の基本的な知識に失敗している可能性があります。あるいは、D3 は非常に回復力のある方法で構築されている可能性があります。

何か案は?(答えがあれば説明してください、これは私にとって興味深いです!)

4

2 に答える 2

3

解決

優先順位を正しくして、ネイティブ関数を使用することが問題でした。

これは、ボタンクリックなどで呼び出すときに機能します。

 $('.myClass').on('click',function() {
   d3.select('#map')
     .on("mousewheel.zoom", null)
     .on("DOMMouseScroll.zoom", null)
     .on("wheel.zoom", null);
 });

これが他の誰かに役立つことを願っています!

于 2013-09-27T16:00:41.140 に答える
0

私の最善の推測は次のとおりです。

$('svg').on('mousewheel DOMMouseScroll', function(e) {
    e.preventDefault();
});
于 2013-09-27T14:53:16.847 に答える