javascript PreventDefault() 被忽略

Question

所以我试图找到我的问题的解决方案，但这似乎与我在 SO 和 Google 上看到的其他 PreventDefault() 问题不同。它也可能有点太窄了，但如果有人有任何调试技巧，我们也将不胜感激。

我有一个网站，向用户显示不同的视频“书签”，用户可以单击它们并更改页面上 div 中播放的视频/seekTo 时间。用户可以在 3 个地方执行此操作。左侧是显示“最近观看的前 10 个视频”的菜单，右侧是基于 D3.js 的拓扑树，顶部有一个基于 django-autocomplete-light 构建的搜索框。所有三种方法都使用相同的 JavaScript 函数 (playvid) 来更改视频并更新网页上的元数据信息。例如，用户单击一个链接并转到视频 1 的第 4 分钟，然后单击另一个链接并转到视频 45 的第 9 分钟。

当我在我的开发机器上实现这一点时，所有三种方法都适用于 FF 18 和 Safari 6(Django 1.4.3、Python 2.7.3，运行 Django 的 Web 服务器)。然后我将其放到生产服务器上(Django 1.4.3、Python 2.6.6、Apache/mod_wsgi)。现在 django-autocomplete-light 的搜索框的方法不起作用，但其他两个可以!我认为不同的Python版本不应该是罪魁祸首......？自动完成代码与我的开发代码相同，但现在看起来像是 PreventDefault() 的某种 JavaScript 问题？经过几个小时的调试，我无法弄清楚在哪里以及为什么，因为代码似乎只是忽略了我的 e.preventDefault();调用...这是我的/navigation_autocomplete/script.html 代码，它捕获用户在自动完成搜索框中单击的内容(尽管我觉得问题是 javascript，而不是特定于这个 Django 模块):

{% 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>

alert() 在 FF 和 Safari 中弹出，使用 Firebug，我可以看到浏览器尝试加载 playvid()，但随后遵循链接 --e.preventDefault();被完全忽略。正如你所看到的，我也试图阻止冒泡(变得绝望)，但没有成功。

有谁知道为什么我的 PreventDefault() 代码在这个特定方法中可能会被忽略，但它在我的其他调用中运行良好(特别是当它在所有 3 种方法的开发中运行良好时)？或者关于如何追踪这个问题的调试技巧？

谢谢!

==========

更新

我尝试了 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>

Answer 1

模糊实现

您的代码会阻止 selectChoice 的默认设置，但不会阻止 click 的默认设置!

自动完成对象触发 input 上的 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>