1

所以我试图找到解决我的问题的方法，但它似乎是我在 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/脚本。

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

1 回答 1

0

一个模糊的实现

您的代码会阻止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>
于 2013-01-28T13:18:33.317 回答