未捕获的 ReferenceError：在 event.preventDefault() 之后未定义聚合物

Question

我收到以下错误：

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>

这是 Polymer 错误还是我做错了什么？

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

Answer 1

正如@badsyntax 上面指出的那样，event.preventDefault() 似乎不适用于点击事件。更改为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>