0

我有一个非常奇怪的问题。我的示例代码 [here][1] 运行良好，但我的 aptana 工作室编辑器中有完全相同的代码，当我在 Chrome 或 Eclipse 浏览器中尝试它时，事件不会触发。我无法想象有什么问题，因为它是完全相同的代码......

HTML

<!DOCTYPE html>
<html>
    <head>
        <title>OrderScreen</title>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
        <script src="js/script.js" type="text/javascript"></script>
    </head>
    <body>
                <a href="">Test</a>
    </body>
</html>

jQuery

$("a").mouseup(function() {
    clearTimeout(pressTimer);
    // Clear timeout
    return false;
}).mousedown(function() {
    // Set timeout
    pressTimer = window.setTimeout(function() {
        alert("hcbdhaf")
    }, 1000);
    return false;
}).click(function() {
    alert("dfsdg");
});
4

1 回答 1

5

如果您的代码确实像引用的那样，问题是当您尝试将事件处理程序挂钩到它们时元素不存在。jsFiddle 的默认设置对你隐藏了这个问题。（看左边，你会看到你的代码在load事件触发之前不会运行——这在页面加载过程中非常非常晚。）

要修复它，要么：

  1. 将您的脚本标签移动到文档的末尾，就在结束</body>标签之前或之后。当浏览器运行您的脚本时，这些元素将存在。这是YUI 团队的推荐， Google 的 web 工程师也很喜欢。

  2. 使用 jQuery 的ready事件。

结合其中任何一个，您还可以考虑使用事件委托，而不是直接在元素上连接事件。您的mouseup和mousedown处理程序将分别附加到每个 a元素。这是很多连接。如果所有这些a元素都在一个容器中（body或者更好的是，更接近的东西），您可以改为在该容器上挂钩事件（因为这些事件冒泡），然后检查事件是否起源于一个a元素。jQuery 支持事件委托，通过delegate（我喜欢它，因为它非常明确）和最近，您传递给on.

于 2012-06-05T12:25:03.813 回答