个人中心
gpt4 book ai didi

javascript - 单击事件监听器不启动转换/转换？

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

我正在用纯 HTML 和 CSS3 创建一个移动菜单“汉堡”按钮，用纯 JS 来处理点击事件。只有一个问题 - 当单击带有 id 'button' 的按钮时，没有任何反应。根据内置的 Firefox 元素检查器，没有添加类，这让我相信我在 JS 的某个地方搞砸了，但我可能是错的。

此外，请忽略“isX”变量 - 稍后将使用它来指示按钮的状态。

谢谢。

index.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="menu.js"></script>
<title>Icon Test</title>
<style>
* {
    margin: 0;
    padding: 0;
    border: 0;
}

.container {
    display: block;
    width: 48px;
    height: 48px;
    background: #999;
}

.line-top {
    position: absolute;
    top: 0;
    left: 0;
    fill: #FFF;
    transition: all 2s ease 3s;

}

.line-top-active {
    transform: translateX(0px) rotate(45deg);
    transform-origin: center;
    -moz-transform-origin: center;
}

.line-bottom {
    position: absolute;
    top: 0;
    left: 0;
    fill: #FFF;
    transition: all 2s ease 3s;
}

.line-bottom-active {
    transform: translateX(0px) rotate(-45deg);
    transform-origin: center;
    -moz-transform-origin: center;
}

.rect-top {
    transition: all 2s ease-in-out 0s;
}

.rect-top-active {
    transform: translateY(8);
    transform-origin: center;
    -moz-transform-origin: center;
}

.rect-bottom {
    transition: all 2s ease-in-out 0s;
}

.rect-bottom-active {
    transform: translateY(-8);
    transform-origin: center;
    -moz-transform-origin: center;
}
</style>
</head>

<body>
<button class="container" id="button">
    <svg id="svg-top" class="line-top" x="0px" y="0px" width="48px" viewBox="0 0 96 96" enable-background="new 0 0 96 96">
        <rect id="rect-top" class="rect-top" width="32" height="4" x="32" y="38"></rect>
    </svg>
    <svg id="svg-bottom" class="line-bottom" x="0px" y="0px" width="48px" viewBox="0 0 96 96" enable-background="new 0 0 96 96">
        <rect id="rect-bottom" class="rect-bottom" width="32" height="4" x="32" y="54"></rect>
    </svg>
</button>
</body>
</html>

菜单.js

var isX = false;
var button = document.getElementById('button');

button.addEventListener('click', function(e) {
    var topSvg = document.getElementById('svg-top');
    var bottomSvg = document.getElementById('svg-bottom');  
    var topLine = document.getElementById('rect-top');
    var bottomLine = document.getElementById('rect-bottom');

    if(isX) {

    } else {
        topLine.classList.add('rect-top-active');
        bottomLine.classList.add('rect-bottom-active');
        topSvg.classList.add('line-top-active');
        bottomSvg.classList.add('line-bottom-active');  
    }

}, false);

编辑 #1:适应 Kai 的回应

最佳答案

“addEventListener”的“事件类型”参数应该是一个字符串。

button.addEventListener('click', function(e) {

关于javascript - 单击事件监听器不启动转换/转换？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/26964073/

25 4 0
文章推荐： javascript - 使用 javascript 检查查询字符串是否有值
文章推荐： python - Flask 应用程序崩溃“正在使用重新加载程序重新启动....socket.error : [Errno 98] Address already in use
文章推荐： javascript - 从外部
标签获取表单对象
文章推荐： python - 如何使用 python 从 Intranet 站点抓取 URL 数据？
行者123
个人简介

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

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