Loading [MathJax]/jax/output/CommonHTML/config.js
首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
社区首页 >问答首页 >单击屏幕上任意位置时如何停止.className

单击屏幕上任意位置时如何停止.className
EN

Stack Overflow用户
提问于 2022-06-22 00:46:38
回答 3查看 60关注 0票数 -1

我有一个函数,它使元素列表中的元素在单击时更改其.className,因此,当我单击该元素时,该元素变为一种颜色,而另一种颜色则变为另一种颜色。这一职能如下:

代码语言:javascript
运行
AI代码解释
复制
const memberB = document.querySelectorAll('#memberBoxAlex, 
#memberBoxLiv, #memberBoxFlo');
for (let i = 0; i < memberB.length; i++) 
memberB[i].onclick = function(){
memberBoxAlex.className = "faded";
memberBoxLiv.className = "faded";
memberBoxFlo.className = "faded";

if(memberB[i].className=="open"){
    memberB[i].className="";
}
else{
    memberB[i].className="open";
}

这是完美的,但是接下来我想要发生的是,当我点击它的框外停止所有的效果,从而使所有的memberB“正常”,比方说,有.className=""。我试着给他们的容器这个函数:

代码语言:javascript
运行
AI代码解释
复制
let exitEffect = document.getElementById(team)
exitEffect.onclick = function(){
memberBoxAlex.className = "";
memberBoxLiv.className = "";
memberBoxFlo.className = "";}

当我单击成员的框外时,className for memberB将“停止”或成为.className="",我如何做到这一点?

EN

回答 3

Stack Overflow用户

回答已采纳

发布于 2022-06-22 01:15:11

对于一个更通用的选择器,可以使用一个单独的类,而我则使用这个片段来使用单个事件侦听器。

代码语言:javascript
运行
AI代码解释
复制
window.addEvent = (event_type, target, callback) => {
  document.addEventListener(event_type, function (event) {
    // If the event doesn't have a target
    // Or the target doesn't look like a DOM element (no matches method
    // Bail from the listener
    if (event.target && typeof (event.target.matches) === 'function') {
      if (!event.target.matches(target)) {
        // If the element triggering the event is contained in the selector
        // Copy the event and trigger it on the right target (keep original in case)
        if (event.target.closest(target)) {
          const new_event = new CustomEvent(event.type, event);
          new_event.data = { originalTarget: event.target };
          event.target.closest(target).dispatchEvent(new_event);
        }
      } else {
        callback(event);
      }
    }
  });
};

然后

代码语言:javascript
运行
AI代码解释
复制
window.addEvent('click', '.openable-member', (event) => {
  document.querySelectorAll('.openable-member').each((element) => {
    if (element !== event.target) {
      element.classList.add('faded');
      element.classList.remove('open'); // guessing you'll need this too
    }
  });

  event.target.classList.toggle('open');
});
票数 1
EN

Stack Overflow用户

发布于 2022-06-22 01:09:14

文档方法querySelectorAll()返回一个静态(非活动) NodeList,它表示与指定的选择器组匹配的文档元素的列表。

所以您可以通过memberB映射,因为它不是数组。你能做的是:

代码语言:javascript
运行
AI代码解释
复制
const memberB = document.querySelectorAll('#memberA,#memberAA, #memberAAA ');

memberB.onclick = function(){
    memberB.className = "faded";

    if(memberB.className == "open"){
        memberB.className = "";
    }
    else{
        memberB.className = "open";
    }
}

票数 0
EN

Stack Overflow用户

发布于 2022-06-22 01:42:50

你可以试试这个:

代码语言:javascript
运行
AI代码解释
复制
memberB[i].className = memberB[i].className.replace("open", "");
票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/72712350

复制
相关文章
Python: 屏幕取色器(识别屏幕上不同位置的颜色)
文章背景:工作中,有时候需要判断图片中不同位置的颜色。有些颜色不太容易区分,所以想通过Python编写代码,通过屏幕取点,获取某个位置的颜色值。
Exploring
2022/09/20
5.1K0
Python:  屏幕取色器(识别屏幕上不同位置的颜色)
任意位置删除节点
删除任意位置节点和添加任意位置节点其实差不多,都是要先找到n-1的位置,然后进行下一步的操作。 唯一有区别的是,需要用断开链接之后,需要用free把节点在堆上的内存清理掉。
用户7272142
2023/10/11
1570
任意位置删除节点
className用法
4.className用法 例 4.1(keyIEFF.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"/>     <title>     </title>     <script language="JavaScript" type="text/javascript">         function calc(thistextar, Span) {             var len = thistextar.value.length;             Span.innerHTML = len + ' 字';             Span.className = 'toredC';         }     </script>     <style type="text/css">         <!--         .toredC {             color: #FF0000;         }         -->     </style> </head> <body><textarea cols="50" rows="3"  onKeyUp="calc(this,document.getElementById('num'))"         ></textarea> (<SPAN id=num>字数</SPAN>) </body> </html>
马克java社区
2020/12/02
8010
className用法
链表任意位置插入节点
之前我们的链表代码只能从头部插入节点,也就是通过修改head指向新节点,然后新节点指向head之前指向的节点达到增加头节点的目的。
用户7272142
2023/10/11
1910
链表任意位置插入节点
UIAutomator2的使用教程
  uiautomator2是一个python库,用于Android的UI自动化测试,其底层基于Google uiautomator,Google提供的uiautomator库可以获取屏幕上任意一个APP的任意一个控件属性,并对其进行任意操作。 GitHub地址:https://github.com/openatx/uiautomator2
全栈程序员站长
2022/09/13
8.8K0
UIAutomator2的使用教程
Android 在任意位置绘制文本
转载请注明出处。请前往 Tiga on Tech 查看原文以及更多有趣的技术文章。
Tiga
2020/01/23
2.6K0
Android 在任意位置绘制文本
【Android】在任意位置弹出PopupWindow
前言 在日常的开发中,经常会有弹框的操作。实现弹框有两种选,PopupWindow或者Dialog,这里就先忽略Dialog。弹框可能会在各种位置出现,在指定View的上、下、左、右、左对齐、右对齐等... 而PopupWindow似乎就提供了showAsDropDown方法(请忽略showAtLocation,这边说的是相对于View显示),这~~就有点尴尬了。 PopupWindow 平时我们可能是这样用PopupWindow的: 创建一个布局,再创建一个类继承PopupWindow public
Gavin-ZYX
2018/05/18
4.6K0
为任意屏幕尺寸构建 Android 界面
在过去的 12 个月内,有约 1 亿台新平板设备被激活,Chrome OS 的激活量增长了 92%,是增长速度最快的桌面平台。这意味着在平板电脑、可折叠设备和 Chrome OS 设备上,有超过 2.5 亿台大屏幕设备运行着 Android 系统,而关于可折叠设备的使用数量也在不断增长,同比增长超过 250%,因此,"大屏" 正在成为 Android 设备中一个重要且增长势头最快的细分市场。这也让设备制造厂商们意识到,针对大屏做优化是让设备在高端手机细分市场中脱颖而出的机会。
Android 开发者
2022/03/25
4.3K0
为任意屏幕尺寸构建 Android 界面
Shazam地理位置漏洞分析:单击链接即可窃取用户的准确位置
近期,研究人员在流行的Shazam应用程序中发现了一个漏洞。在该漏洞的帮助下,攻击者只需单击一个链接就可以窃取用户的精确位置!目前,受该漏洞影响的用户数量已经超过了一个亿,攻击者只需要通过单击链接即可访问受应用程序权限保护的设备功能。实际上,如果攻击者更聪明的话,这个漏洞也可以被转换为零点击漏洞。但不幸的是,苹果和谷歌拒绝为这个漏洞提供任何的漏洞奖励,不过大家不用担心,因为问题已经解决了…
FB客服
2021/03/09
7170
Shazam地理位置漏洞分析:单击链接即可窃取用户的准确位置
如何在Cisco设备上停止Traceroute或Ping?
在深入讨论如何停止Traceroute或Ping之前,让我们先了解一下这两个工具的基本原理。
网络技术联盟站
2023/09/06
7450
如何在Cisco设备上停止Traceroute或Ping?
Tuxedo多人使用tmadmin命令时,如何强制停止服务
需要重启Tuxedo应用时,提示:LIBTUX_CAT:577: ERROR: Unable to register because the slot is already owned
bisal
2019/01/29
1.7K0
如何在Cisco设备上停止Traceroute或Ping?
Traceroute和Ping是网络工程师和管理员在故障排除和网络监测中经常使用的工具。它们可以帮助我们诊断网络问题并确定网络中的延迟和路径。然而,在某些情况下,我们可能需要停止正在进行的Traceroute或Ping操作。本文将详细介绍如何在Cisco设备上停止Traceroute或Ping。
网络技术联盟站
2023/06/25
7460
如何在Cisco设备上停止Traceroute或Ping?
win10 uwp 录制任意应用屏幕
在 1803 可以使用 Windows.Graphics.Capture 捕获屏幕,可以用来录制应用的窗口
林德熙
2019/10/17
1.8K0
jQuery 双击事件(dblclick)时,不触发单击事件(click)
在jQuery的事件绑定中,执行双击事件(dblclick)时能触发两次单击事件(click)。即一个标签元素(如div等),如果元素同时绑定了单击事件(click)和双击事件(dblclick),那么执行单击事件(click)时,不会触发双击事件(dblclick), 执行双击事件(dblclick)时却会触发两次单击事件(click)。 先看一下点击事件的执行顺序:
飞奔去旅行
2019/06/13
5.5K0
EasyGBS程序停止时内核未能关闭,应该如何优化?【附代码】
去年TSINGSEE青犀视频对旗下的EasyDSS、EasyGBS等视频平台陆续更换了新内核版本。新内核版本性能更加稳定,感兴趣的用户可以前往官网进行使用体验。
TSINGSEE青犀视频
2022/01/12
5420
Python实现计算机屏幕任意区域截图
程序功能与用法:运行后有个主窗体,上面有个按钮,单击后开始截图,鼠标坐标落下开始截图,鼠标左键抬起表示截图结束,然后弹出对话框提示保存截图文件。 本文要点在于Python扩展库pillow提供的ImageGrab支持全屏幕或指定区域的截图。 import tkinter import tkinter.filedialog import os from PIL import ImageGrab from time import sleep #创建tkinter主窗口 root = tkinter.Tk() #
Python小屋屋主
2018/04/16
6.1K0
快速搞定 uiautomator2 自动化测试工具使用
Google 官方提供了一个 Android 自动化测试工具(Java 库),基于 Accessibility 服务,功能很强,可以对第三方 App 进行测试,获取屏幕上任意一个 App 的任意一个控件属性,并对其进行任意操作,但有两个缺点:
霍格沃兹测试开发
2020/08/31
5K0
快速搞定 uiautomator2 自动化测试工具使用
Python+tkinter+pillow实现屏幕任意区域截图
基本思路:首先获取并显示全屏幕截图,然后在全屏幕截图上响应鼠标左键按下和抬起事件,最后进行二次截图。 import tkinter import tkinter.filedialog import os from PIL import ImageGrab from time import sleep root = tkinter.Tk() #设置窗口大小与位置 root.geometry('100x40+400+300') #设置窗口大小不可改变 root.resizable(False, False) #
Python小屋屋主
2018/04/16
8K3
点击加载更多

相似问题

单击任意位置关闭菜单;如何使其在单击任意位置时停止打开

20

单击屏幕上的任意位置以删除类。

23

禁止在单击屏幕上的任意位置时关闭引导模式

12

如果用户单击屏幕上的任意位置,如何关闭菜单?

115

如何在flex中单击屏幕上的任意位置时移除登录面板

20
添加站长 进交流群

领取专属 10元无门槛券

AI混元助手 在线答疑

扫码加入开发者社群
关注 腾讯云开发者公众号

洞察 腾讯核心技术

剖析业界实践案例

扫码关注腾讯云开发者公众号
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档