单击一个不属于“关闭”按钮的单独按钮即可触发关闭事件

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (1)
  • 关注 (0)
  • 查看 (3)

我有一个公告栏,其中心按钮链接到另一个站点。它最右边还有一个“关闭”按钮。当我单击中心按钮时,关闭按钮也会被触发。

我测试了一下是否是因为我#close通过将div 从div中删除来封装#bardiv,但它仍然导致相同的问题。

var closeBar = document.getElementById("close");
var bar = document.getElementById("bar");
if (closeBar) {
  addEventListener('click', function() {
    bar.classList.add('superHidden');
  })
}

#bar {
  position: fixed;
  width: 100vw;
  display: flex;
  height: 50px;
  bottom: 0px;
  left: 0px;
}

ul {
  display: flex;
  justify-content: center;
  height: 100%;
  list-style: none;
}

li {
  margin: auto 0;
  font-size: 22px;
}

#close {
  position: fixed;
  right: 20px;
  bottom: 0;
  z-index: 1000;
  height: 50px;
  width: 25px;
  cursor: pointer;
}

.superHidden {
  display: none!important;
}

<div id="bar">
  <ul>
    <li><a target="_blank" href="google.com"><button >Google</button></a></li>
  </ul>
  <div id="close">
    <ul>
      <li>X</li>
    </ul>
  </div>
</div>
提问于
用户回答回答于

您没有为事件侦听器指定目标,因此您要将click事件添加到整个窗口

addEventListener('click', function() {
    bar.classList.add('superHidden');
})

如果单击窗口中的任意位置,则会触发此事件。

听起来你想将事件添加到“关闭按钮”:

closeBar.addEventListener('click', function() {
    bar.classList.add('superHidden');
})

完整示例:

var closeBar = document.getElementById("close");
var bar = document.getElementById("bar");
if (closeBar) {
  closeBar.addEventListener('click', function() {
    bar.classList.add('superHidden');
  })
}

#bar {
  position: fixed;
  width: 100vw;
  display: flex;
  height: 50px;
  bottom: 0px;
  left: 0px;
}

ul {
  display: flex;
  justify-content: center;
  height: 100%;
  list-style: none;
}

li {
  margin: auto 0;
  font-size: 22px;
}

#close {
  position: fixed;
  right: 20px;
  bottom: 0;
  z-index: 1000;
  height: 50px;
  width: 25px;
  cursor: pointer;
}

.superHidden {
  display: none!important;
}

<div id="bar">
  <ul>
    <li><a target="_blank" href="google.com"><button >Google</button></a></li>
  </ul>
  <div id="close">
    <ul>
      <li>X</li>
    </ul>
  </div>
</div>

热门问答

急急急!!核验图片验证码填写到接入备案企业侧备案系统中,在哪操作啊?

无聊至极互联网重度用户
推荐
你反馈的上海备案的APP核验验证码吗?如果是的话,提交订单的时候直接写验证码就可以的。 在补充材料的下面 image.png ... 展开详请

存储桶和项目概念?

Hyman.W

腾讯云 · 高级产品经理 (已认证)

推荐
一个存储桶对应多个项目的管理方式,可以使用 “标签” 来管理, 在创建存储桶或者修改存储桶配置的页面可以添加。 参考: 1,存储桶标签使用 https://cloud.tencent.com/document/product/436/34830 2,如果需要通过外部系统来管理...... 展开详请

智能钛能处理大数据文件吗?我有30G的数据存储在本地电脑硬盘上?

腾讯智能钛AI开发者

腾讯云 · 智能钛产品团队 (已认证)

腾讯智能钛产品团队官方运营账号。分享产品最新动态,第一时间解答用户疑问。
推荐

硬盘可以升级吗?

最爱开车啦互联网的敏感者
推荐

可以升级,小微活动中没有云硬盘的的,后续可以用同帐号在官网购买和服务器同地域同地区的云硬盘挂载到服务器上使用。

云硬盘挂载初始化方法 可参考 https://cloud.tencent.com/document/product/362/6735

云通信 70402 错误?

推荐已采纳

参数非法,请检查必填字段是否填充,或者字段的填充是否满足协议要求。

您好,可参考此文档:https://cloud.tencent.com/document/product/269/1671

录音识别sdk的录音文件如何保存?

Richel码农
推荐

1.实时语音sdk内置录音器采集音频暂不支持保存语音数据,如需要保存语音数据建议上层自行采集音频数据。

2.实时语音识别sdk不支持暂停&继续操作,停止识别后重新调用start即开始识别。

所属标签

扫码关注云+社区

领取腾讯云代金券