未捕获的ReferenceError:在event.preventDefault()之后未定义Polymer

时间:2014-07-14 13:48:29

标签: polymer

我收到以下错误:

Uncaught ReferenceError: Polymer is not defined

当我点击以下元素的链接时:

<!DOCTYPE html>
<html>
<head>
    <script src="bower_components/platform/platform.js"></script>
</head>
<body>
    <my-element id="my_element"></my-element>
</body>
</html>

<link rel="import" href="bower_components/polymer/polymer.html">
<polymer-element name="my-element">
    <template>
        <a href="#" on-tap="{{linkClicked}}">my link</a>
    </template>
    <script>
        Polymer('my-element', {
            linkClicked: function(event, detail, sender) {
                event.preventDefault();
            }
        });
    </script>
</polymer-element>

这是一个聚合物错误还是我做错了什么?

http://jsbin.com/cuxep/1/edit?html,output

1 个答案:

答案 0 :(得分:2)

正如@badsyntax指出的那样,看起来event.preventDefault()对tap事件起作用并不好。更改为on-click似乎解决了阻止导航的问题。

您看到的错误:

Uncaught ReferenceError: Polymer is not defined

这似乎是格式错误的HTML的工件,我怀疑这会导致加载polymer.html和正在执行的<script>元素之间的竞争条件。清理HTML后,我再也无法重现它了。

这里的jsbin是我认为你想要的:http://jsbin.com/boweliwe/1/edit

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>

<script>console.clear()</script>
<script src="//www.polymer-project.org/components/platform/platform.js"></script>
<link rel="import" href="//www.polymer-project.org/components/polymer/polymer.html">

<my-element></my-element>

<polymer-element name="my-element">
<template>
  <a href='#' on-click="{{linkClicked}}">my link</a>
</template>
<script>
  Polymer('my-element', {
    linkClicked: function(event, detail, sender) {
      event.preventDefault();
    }
  });
</script>
</polymer-element>

</body>
</html>