0

私は長い間ここに潜んでいましたが、今、本当に取り組むことができない問題に直面しています。

これは単純な#viewportand.canvasで、.canvasは超広角であり、#viewport次のoverflow:hiddenとおりです。

<div id="viewport">
    <div class="canvas">
        <a href="#" onclick="alert('event fired, boo.')">do not fire on mouse up</a>
    </div>
</div>

ここにあるコードを使用して、jQuery でドラッグ スクローラーを作成したので、クリックし#viewportてドラッグすると、コンテンツがスクロールされ、最も近い 190 ピクセルの倍数にスナップされます (関連性はありませんが、誰かが私のコードを必要とする可能性があります)。

$("html").mouseup(function(e) {
    down = false;
    $("#viewport").animate({scrollLeft:(190 * Math.round($("#viewport").scrollLeft() / 190))}, 150);
});
$("#viewport").mousedown(function(e) {
    e.preventDefault();
    down = true;
    x = e.pageX;
    left = $(this).stop().scrollLeft();
});
$(document).mousemove(function(e) {
    if (down) {$("#viewport").scrollLeft(left - e.pageX + x);}
});

私がしたいのは、リンク上でドラッグを開始することだけです。マウスアップしたときに、リンクが起動しないようにするだけです。

e.preventDefault()いたるところに配置しようとしましたが、マウスを離したときにリンクが起動するのを防ぐことができないようです。

4

1 に答える 1

0

最初に、リンクのクリック イベントを実行する必要がありe.preventDefault()ます。これは、デフォルトで防止したいものだからです。

第 2 に、JavaScript でアタッチされたクリック ハンドラは HTML でアタッチされた後alert('event fired, boo.')に起動し、遅すぎるため、上記を実行しても防止されません。HTML から安全に削除できます。e.preventDefault()onclick="alert('event fired, boo.')"

編集

スマートな解決策は、リンクが二重目的にならないようにすることです。ハイパーリンクの機能からドラッグの機能を分割します。ただし、これが不可能な場合は、次の戦略をお勧めします。

  • 以外の処理を行わないハンドラーでハイパーリンク アクションを抑制しますe.preventDefault()。
  • 確実に動作する 190px でドラッグ可能性を取得します。
  • マウスダウン時に、リンク位置を読み取って保存します。
  • マウスアップの場合、(位置が変更された) 何もしません。そうでなければ、ハイパーリンク アクションをシミュレートします。
于 2012-09-12T01:50:10.873 に答える