1

私は自分の問題の解決策を見つけようとしましたが、SO と Google で見た他の preventDefault() の質問に固有のようです。少し狭すぎるかもしれませんが、デバッグのヒントがあれば、それもありがたいです。

私は、さまざまなビデオの「ブックマーク」をユーザーに表示するサイトを持っています。ユーザーはそれらをクリックして、ページの div で再生中のビデオ/ seekTo 時間を変更できます。ユーザーがこれを実行できる場所は 3 つあります。左側は「最近見たビデオのトップ 10」を表示するメニュー、右側は D3.js ベースのトポロジ ツリー、上部には django-autocomplete-light から構築された検索ボックスがあります。3 つのメソッドはすべて同じ JavaScript 関数 (playvid) を使用して、ビデオを変更し、Web ページのメタデータ情報を更新します。たとえば、ユーザーがリンクをクリックすると、ビデオ 1 の 4 分目に移動し、別のリンクをクリックすると、ビデオ 45 の 9 分目に移動します。

これを開発マシンに実装したところ、FF 18 と Safari 6 (Django 1.4.3、Python 2.7.3、Django の Web サーバーを実行) で 3 つの方法すべてが機能しました。次に、本番サーバー (Django 1.4.3、Python 2.6.6、Apache / mod_wsgi) に配置しました。現在、django-autocomplete-light の検索ボックスを使用した方法は機能しませんが、他の 2 つは機能します! 異なる Python バージョンが原因ではないはずだと思います...? オートコンプリート コードは私の開発コードと同じでしたが、現在は preventDefault() に関する JavaScript の問題のように見えますか? しかし、何時間ものデバッグの後、コードが私の e.preventDefault(); を無視しているように見えるので、どこで、なぜなのかわかりません。呼び出し...これが私の /navigation_autocomplete/script です。

{% load url from future %}

<script type="text/javascript">
$(document).ready(function() {
    $('#navigation_autocomplete').yourlabsAutocomplete({
        url: '{% url 'navigation_autocomplete' %}',
        choiceSelector: 'a',
    }).input.bind('selectChoice', function(e, choice, autocomplete) {
        e.preventDefault();
        e.stopImmediatePropagation();
        var URL = choice.attr('href');
        alert('this should not follow the link!!');
        playvid(URL);
        return false;
    });
});
</script>

FF と Safari で alert() がポップアップし、Firebug を使用すると、ブラウザが playvid() を読み込もうとしているのに、リンク e.preventDefault(); をたどっていることがわかります。は完全に無視されます。ご覧のとおり、私も泡立ちを止めようとしましたが（絶望的になりました）、うまくいきませんでした。

私の preventDefault() コードがこの 1 つの特定のメソッドで無視される可能性がある理由について誰か考えがありますか? または、これを追跡する方法に関するデバッグのヒントはありますか?

ありがとう！

===========

アップデート

私は jpic の解決策を試しましたが、うまくいきません...これが新しいコードブロックです (多分私は何かを太らせました...):

<script type="text/javascript">
$(document).ready(function() {
    $('#navigation_autocomplete a').on('click', function(e) {e.preventDefault(); });
    $('#navigation_autocomplete').yourlabsAutocomplete({
        url: '/video_search/navigation/',
        choiceSelector: 'a',
    }).input.bind('selectChoice', function(e, choice, autocomplete) {
        var URL = choice.attr('href');
        alert('this should not follow the link!!');
        playvid(URL);
        return false;
    });
});
</script>
4

1 に答える 1

0

あいまいな実装

あなたのコードは selectChoiceのデフォルトを防ぎますが、クリックのデフォルトは防ぎません!

inputAutocomplete オブジェクトは、マウスまたはキーボードで選択肢が選択されると、要素の selectChoice をトリガーします。clickイベントの邪魔にはなりません。ブラウザのデフォルトイベントが必要ない場合はclick、なぜ使用するの<a>ですか?

代替実装の提案

次のようなオートコンプリート テンプレートを作成できます。

{% for video in video_qs %}
<span class="div choice" data-href="{{ video.get_absolute_url }}">{{ video }}</span>
{% endfor %}

そのようなjsで：

<script type="text/javascript">
$(document).ready(function() {
    $('#navigation_autocomplete')
        .yourlabsAutocomplete({
            url: '{% url 'navigation_autocomplete' %}',
            choiceSelector: '.choice',
        }).input.bind('selectChoice', function(e, choice, autocomplete) {
            playvid(choice.data('href'));
        });
});
</script>

この設計による単純さは、django-autocomplete-light の私のお気に入りの機能です。

とにかくあいまいな実装を修正する

クリックできないタグが本当に必要な場合は<a>、 jQuery を使用できますon()。

$('#navigation_autocomplete').on('click', 'a', function(e) { e.preventDefault(); });

例：

<script type="text/javascript">
$(document).ready(function() {
    $('#navigation_autocomplete')
        .on('click', 'a', function(e) { e.preventDefault(); })
        .yourlabsAutocomplete({
            url: '{% url 'navigation_autocomplete' %}',
            choiceSelector: 'a',
        }).input.bind('selectChoice', function(e, choice, autocomplete) {
            var URL = choice.attr('href');
            playvid(URL);
        });
});
</script>
于 2013-01-28T13:18:33.317 に答える