个人中心
gpt4 book ai didi

javascript - polymer 纸图标按钮不会触发点击

转载 作者：行者123 更新时间：2023-11-28 00:03:40 25 4
gpt4 key购买 nike

我已经安装了 Polymer 1.0 以用于我的网站。我在纸张工具栏元素中有一个纸张图标按钮元素。但是，纸张图标按钮不会触发任何事件。这是我的 html。

<!DOCTYPE html>
  <html>
    <head>
      <!-- Declare meta -->
      <meta charset="UTF-8">
      <meta name="author" content="TickerOfTime">
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js" type="text/javascript"></script> <!-- Load jQuery 2.1.4 -->
      <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js" type="text/javascript"></script> <!-- Load jQueryUI 1.11.4 -->
      <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css" type="text/css"> <!-- Load jQueryUI CSS 1.11.4 -->
      <link href="http://fonts.googleapis.com/css?family=Roboto:400,600|Ubuntu|Poiret+One|Source+Code+Pro:300" rel="stylesheet" type="text/css"> <!-- Load Fonts (Roboto:400(600), Ubuntu:400, Poiret One:400, Source Code Pro:300l) -->
      <link rel="stylesheet" href="resources/prettify.css"> <!-- Load Prettifier CSS -->
      <script type="text/javascript" src="resources/prettify.js"></script> <!-- Load Prettifier JS -->
      <script src="script.js" type="text/javascript"></script> <!-- Load JavaScript -->
      <link href="stylesheet.css" rel="stylesheet" type="text/css"> <!-- Load CSS -->
      <link rel="icon" href="images/rcpanel.png"> <!-- Load favicon -->
      <script src="bower_components/webcomponentsjs/webcomponents-lite.min.js" type="text/javascript"></script> <!-- Load polyfill support -->
    <!--                          Load Polymer/Iron here                                -->
      <link rel="import" href="bower_components/iron-icon/iron-icon.html"> <!-- Load Polymer Iron-Icon -->
      <link rel="import" href="bower_components/iron-icons/iron-icons.html"> <!-- Load Polymer Iron-Icons -->
    <!--                          Load Polymer Gold here                                -->
      <link rek="import" href="bower_components/gold-email-input/gold-email-input.html"> <!-- Load Polymer Gold-Email-Input -->
    <!--                          Load Polymer Molecules here                           -->
      <link rel="import" href="bower_components/marked-element/marked-element.html"> <!-- Load Polymer Marked -->
    <!--                          Load Polymer Paper here                               -->
      <link rel="import" href="bower_components/paper-material/paper-material.html"> <!-- Load Polymer Paper-Material -->
      <link rel="import" href="bower_components/paper-behaviors/paper-button-behavior.html"> <!-- Load Polymer Paper-Behaviors -->
      <link rel="import" href="bower_components/paper-button/paper-button.html"> <!-- Load Polymer Paper-Button -->
      <link rel="import" href="bower_components/paper-icon-button/paper-icon-button.html"> <!-- Load Polymer Paper-Icon-Button -->
      <link rel="import" href="bower_components/paper-input/paper-input.html"> <!-- Load Polymer Paper-Input -->
      <link rel="import" href="bower_components/paper-spinner/paper-spinner.html"> <!-- Load Polymer Paper-Spinner -->
      <link rel="import" href="bower_components/paper-radio-button/paper-radio-button.html"> <!-- Load Polymer Paper-Radio-Button -->
      <link rel="import" href="bower_components/paper-toast/paper-toast.html"> <!-- Load Polymer Paper-Toast -->
      <link rel="import" href="bower_components/paper-radio-group/paper-radio-group.html"> <!-- Load Polymer Paper-Radio-Group -->
      <link rel="import" href="bower_components/paper-toolbar/paper-toolbar.html"> <!-- Load Polymer Paper-Toolbar -->
      <title>RCPanel</title>
</head>
<body>
    <paper-material elevation="2" class="Paper" id="SideBarPaper" layered>

    </paper-material>
    <paper-material elevation="1" class="Paper" id="MainPaper">
        <paper-toolbar id="MenuBar">
            <paper-icon-button src="bower_components/material-design-icons/navigation/2x_web/ic_menu_white_36dp.png" id="MainMenuButton" class="MenuButton"></paper-icon-button>
                <div id="MenuDiv">
                        <p class="Headline">Welcome to RCPanel</p>
                </div>
        </paper-toolbar>
        <p>This is the development of RCPanel.<br />If you would like to help with this project, or test it, click <a href="https://github.com/RCPanel/main">here</a>.</p>
        <paper-toast text="You clicked the menu button!" id="ClickToast"></paper-toast>
    </paper-material>
</body>
</html>

JavaScript代码就是这样的。

$(document).ready(function() {
prettyPrint();
var ButtonToast = $("#ClickToast");
var MenuButton = $("#MainMenubutton");
function ShowToast(Object) {
    Object.show();
};
MenuButton.on("tap",function() {
    ShowToast(ButtonToast);
});
});

我已经尝试过 on-tap、onclick、click、tap，所有我能想到的事件都给出了。是否我设置不正确，或者事件完全错误？

最佳答案

基本上，您使用的代码不是 Javascript，而是 jquery。

因此，在 webcomponents-lite.js 后面的顶部附加以下标签。

<script src="http://code.jquery.com/jquery-2.1.4.min.js"></script>

这应该有效。

-- 更新 --

这样代码就可以工作了。

<!DOCTYPE html>
<html lang="en">
<head>
<script src="//polymer-project.org/1.0/samples/components/webcomponentsjs/webcomponents-lite.min.js"></script>
<link rel="import" href="http://kasperpeulen.github.io/PolymerElements/all.html">
<link rel="import" href="//elements.polymer-project.org/bower_components/paper-checkbox/paper-checkbox.html">
<script src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
</head>
<body>
<paper-material elevation="1" class="Paper" id="MainPaper">
  <paper-toolbar id="MenuBar">
    <paper-icon-button src="bower_components/material-design-icons/navigation/2x_web/ic_menu_white_36dp.png" onclick="displaytost()" id="MainMenuButton" class="MenuButton"></paper-icon-button>
    <div id="MenuDiv">
      <p class="Headline">Welcome to RCPanel</p>
    </div>
  </paper-toolbar>
  <p>This is the development of RCPanel.<br />
    If you would like to help with this project, or test it, click <a href="https://github.com/RCPanel/main">here</a>.</p>
  <paper-toast text="You clicked the menu button!" id="ClickToast"></paper-toast>
</paper-material>
<paper-toast id="hello"
                 duration="6000"
                 text="Hello World"> </paper-toast>
<script>
function displaytost(){
  document.querySelector('#hello').show();
  console.log("button Clicked")
}
</script>
</body>
</html>

Test Here

关于javascript - polymer 纸图标按钮不会触发点击，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/31552963/

25 4 0
文章推荐： C++ enable_if 模板类方法，如果它是 std::vector>
文章推荐： javascript - Google map - 将 map 类型选择插入 div
文章推荐： javascript - 使用 webpack 将构建文件复制到另一个元素
文章推荐： css - 由于悬停时的过渡/缩放，移动设备上的滚动困难
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com