js怎么知道哪个按钮被点击了？

在JavaScript中，您可以通过为每个按钮添加事件监听器并在其回调函数中处理点击事件来知道哪个按钮被点击了。以下是一个示例：

首先，在HTML中创建两个按钮：

<button id="button1">按钮1</button>
<button id="button2">按钮2</button>

然后，在JavaScript中为每个按钮添加事件监听器：

document.getElementById("button1").addEventListener("click", function() {
  alert("您点击了按钮1");
});

document.getElementById("button2").addEventListener("click", function() {
  alert("您点击了按钮2");
});

在这个示例中，当用户点击任何一个按钮时，浏览器将弹出一个警告框，显示哪个按钮被点击了。当button1被点击时，会弹出"您点击了按钮1"，当button2被点击时，会弹出"您点击了按钮2"。

相关·内容

按钮被点击后屏蔽点击且倒计时60S能再次被点击-JS实现和JQuery实现

正如上图所示那样-60S后还会还原、直接上代码: js.../reg.js"> //(我是分开写的--后面的代码我是导入的) var wait = 60; function time(btn) { if(wait == 0) {

1.7K2 0

js中怎么使点击按钮后文本框获得焦点

发布者：全栈程序员栈长，转载请注明出处：https://javaforall.cn/112375.html原文链接：https://javaforall.cn

9.5K2 0

这个框架究竟是怎么做到的（一）

比如细到组件的某个方法，当 A 按钮被点击时，点击的代码才会被下载和执行；点击代码执行后发生数据变更，依赖这个数据的 B 组件的渲染代码才会被下载和执行。...下面以一个计数器的简单例子来看下 Qwik 是怎么从框架层面实现的。图 12 是例子的源码，当按钮点击后，展示的 count 值会加 1。...图 13：编译后的两个 chunk 这里就有一个问题，Qwik 是怎么知道按钮点击的时候需要下载哪个 chunk 的代码、以及 count 数据发生变化后需要下载哪些组件的渲染代码呢？...按钮上的 on:click 属性值是一个序列化后的字符串，用于表示按钮点击后需要调用哪个 JS 文件的哪个函数。...4）当用户点击按钮时，QwikLoader 会捕获到点击事件并知道是按钮产生的。

1.7K5 0

Vue笔记(10) vue-router

Vue-router 但是当时我创建项目的时候就选择了安装router,所以在src这个文件夹里面有router文件夹了我还在网上搜索了一些资料: 我们把index.js删掉自己写...因为浏览器不知道我们什么时候使用哪个路由.所以我们还需要使用不同的标签,使我们的URL能发生改变 router-link用于显示标签和内容 router-view决定渲染时的位置,用于占位 App.vue...active-class可以修改默认的名称在进行高亮显示的导航菜单或者tabbar时,会使用到该类但是通常不会修改类的属性,会直接使用默认的router-link-active即可它的需求可能是这种: 点击了哪个按钮...,就给哪个按钮变个颜色现在给这个类添加样式: 但是我现在觉得这个类名太长了,我想修改它,就可以给router-link加一个active-class的属性,属性值为我们想要设置的类名...样式也要跟着修改: 一个一个改可能太麻烦了,所以有一个简便的方法: 但是这个一般不修改的通过代码跳转网页现在我希望直接放按钮,通过点击跳转到对应的页面本文由“壹伴编辑器”提供技术支持

8751 0

DjangoBlog｜12 博客文章删除功能(优化版)

我们不考虑个人能力问题，我们将原因合并：删除前需要提示用户正在进行删除操作，那这样想，更好的解决方法是，出一个弹框即可，就是当用户点击文章详情页上的删除按钮时，先弹出一个弹框提示用户是否要删除对应文章，...如果不知道怎么实现，我们直接浏览器搜索bootstrap 弹框即可。...-- Button trigger modal --> modal触发器，就是点击这个按钮，就会出现弹框，里面比较重要的两个设置： data-bs-toggle="modal"，表示这个是一个modal...类型的按钮/开关， data-bs-target="#exampleModal"，其中exampleModal为我们设置的Modal的id，用于指示这个按钮是对应哪个Modal。...，raphael.js是一个可以渲染可缩放矢量图形 (SVG) 的js库，这个被引入本来是django-mdeditor中渲染md内容用的，暂时不知道为什么会和Bootstrap的modal冲突，按上面修改就可以解决问题

7782 0

Chrome断点调试

自己再琢磨琢磨~ 继续上图：然后我们当然是回去点击加载更多按钮啦，为什么？额。。。如果你这么问，请允许我用这个表情，不点击加载更多按钮，怎么去触发点击事件？...不过我相信大家肯定不会问这么low的问题~不瞎扯了~ 继续正题，上面的图就是点击加载更多按钮后的情况，我们可以看到左侧的页面被一个半透明的层给盖住了，页面上方还有一串英文和两个按钮，右侧代码227行被添加上了背景色...继续琢磨琢磨~ 如果出现了上图这个情况，说明一点，click事件中的函数被调用了，进一步说明了点击事件生效。那么我们对于这个问题产生的第一个“犯罪嫌疑人”就被排除了。...下图示范一下它被点击以后的效果：我单击了两次这个按钮（或者使用F10快捷键），js代码从227行执行到了229行，所以我管它叫”逐语句执行“或者”逐步执行“。...工具的用法我就不再赘述了，大家知道用法就行，具体怎么去更合理的使用，还需要大家通过大量的实践去总结提升~ 发布者：全栈程序员栈长，转载请注明出处：https://javaforall.cn/143230

4.6K2 0

要小心 JavaScript 的事件代理

') }) 只要网页中任意一个位置被点击了，都会触发绑定在 document 元素上的点击事件。...想要知道事件具体是发生在哪个元素上面，可以通过事件对象提供的 target 属性来判断。..., function (e) { if (e.target.tagName === 'BUTTON') { console.log('按钮被点击了') } }) 这时问题就出现了，按钮即使被点击了...if 条件也不一定成立，即也不一定会输出“按钮被点击了”。...我们真正的意图是，只要点击是发生在按钮上面，不论是按钮的哪个位置，我们都应视为按钮被点击了。

6002 0

vue-router基本使用

路由，其实就是指向的意思，当我点击页面上的home 按钮时，页面中就要显示home的内容，如果点击页面上的about 按钮，页面中就要显示about 的内容。...Home按钮 => home 内容， about按钮 => about 内容，也可以说是一种映射。所以在页面显示中，有两个部分，一个是需要点击的部分，一个是点击之后，显示点击内容的部分。　　...点击之后，怎么做到正确的对应，比如，我点击home 按钮，页面中怎么才能显示home的内容。这就要在js 文件中配置路由。　　...因为routes 只是定义了一组路由，它放在哪里是静止的，当真正来了请求，怎么办？就是当用户点击home 按钮的时候，怎么办？...所以还有一个非常重要的属性 to，它定义点击之后，要到哪个路径下，如：Home 　　2

9602 0

接口测试平台代码实现24:项目列表的删除功能实现

本节我们要做的是项目列表页面的删除功能：我们先看删除按钮：首先我们设计一个js函数，让其点击之后触发删除功能，为了防止误删，所以要有个确认的对话框。...先在底部新建一个script用来存放js删除函数。我这里取名叫做delete_project了。现在我们要想一件事，就是当用户点击删除按钮后，我们js函数怎么知道要删除哪个项目呢？...所以，我们在删除按钮中写onclick属性调用这个删除函数的时候应该加入项目的id。这个id是一个变量，每个删除按钮都不同。注意这个{{}}外面也要有一层单引号，来告诉js这是个字符串。...它属于调用浏览器自带的对话框，只有取消和确定俩个按钮，当用户点击删除时会显示：这时候如果点击取消，那么这个confirm方法会返回一个false,如果点击确定，那么就返回true，我们要做的逻辑是，...我们来做测试吧：确保服务在运行状态刷新页面，让页面保持最新的代码点击第二个项目的删除按钮弹出对话框点击取消 - 页面没变化，项目没删除。弹出对话框点击确定 - 页面刷新，项目删除。

1.8K3 0

js那些事

1.3K3 0

从编程小白到全栈开发：寻找代码中的问题

错误被精准的定位，这方便的简直就是送货上门了。相应的，命令行下的错误信息也是比较清楚的，也给你指明了错误所在的文件路径、哪一行那一列： ?...在VSCode的菜单中选择“调试”>"开始调试"来运行你的代码，则你的错误代码会随之被高亮显示： ? 怎么样？神器在手，编码无忧啊！...如果在计算器界面上输入些简单数值并点击计算按钮，我们可以发现调试界面会高亮显示当前代码暂停的位置： ?...到此，我们知道怎么调试浏览器里的代码了，回过头来再看在VSCode里调试Node.js后端代码，就觉得不那么陌生了，因为非常的相似。...然后，重新去浏览器那边的计算器网页中进行一次计算操作，当点击计算按钮的时候，网页代码中会通过Ajax调用后端的/calc服务，因此，VSCode中的代码就会在之前设置的断点处暂停下来，随之你可以通过编辑器顶部的调试工具栏上的按钮

1.2K3 0

四种方式解决页面国际化问题——步骤详解

虽然国际化大企业的网站被人关注的最多，但是哪个国际化大企业的网站不是访问很快呢？哪个国家化大公司网站经常被挂马、被黑呢？...例子 ok，这是很多网站都有的功能，给我们一个可以切换语种的按钮或者是链接，我们可以根据自己的需要浏览。这个就是使用translater.js实现的，下面说一下怎么实现的！ H5源码按钮" /> js/jquery-1.11.2.min.js" type="text/javascript" charset...哪里还有不明白的，可以直接看我的源码，写的相对来说还是比较全面的，但是细心的人可能已经发现了，我里面有一个submit和button没有实现语种的切换，这个我没想到怎么写，希望谁知道怎么实现的可以私聊我...第四种方法 I18N实现国际化这可能是网上说的最多的一个办法了，其实这也是目前相对比较成熟的一个办法，今天这里也简单的说一下怎么使用的，不管别的教程是怎么写的，但是都是千篇一律，用法都是一样的，先说一下思路

1.4K5 0

接口测试平台代码实现10：菜单页面升级

打开welcome.html：在菜单的html代码块下新增一个button按钮，文案为“隐藏” 我们现在刷新页面仍然看不到这个按钮，那是因为这个按钮被菜单给遮挡了。...按下这个按钮要执行哪个js函数用：我们新建一个叫display_menu的js函数，作用是隐藏左侧菜单：在button标签下，写一个script标签，内部作为我们js函数的存放位置。...那我们继续修改js的这个函数，让这个按钮本身移动到最左边，并且文案改成‘显示’ btn就是我们的这个控制按钮，点击后，把它的外左边距变成0px，就是紧贴左边，然后它的文案改成 ‘显示了’；让我们刷新页面再点击看看效果...怎么弄呢？我们要继续修改这个js函数，让其点击之前进行一个判断。...然后我们要介绍如何让这个按钮一点击就回到主页：也就是点击跳转到：/home/ 正常的方法我们是可以写一个a标签超链接。但是现在我们做的是一个button标签的按钮，那么怎么操作呢？

2K3 0

vue之vue-router实例

Home按钮 => home 内容， about按钮 => about 内容，也可以说是一种映射. 所以在页面上有两个部分，一个是点击部分，一个是点击之后，显示内容的部分。...点击之后，怎么做到正确的对应，比如，我点击home 按钮，页面中怎么就正好能显示home的内容。这就要在js 文件中配置路由。路由中有三个基本的概念 route, routes, router。...因为routes 只是定义了一组路由，它放在哪里是静止的，当真正来了请求，怎么办？就是当用户点击home 按钮的时候，怎么办？...页面实现（html模版中）在vue-router中, 我们看到它定义了两个标签和来对应点击和显示部分。就是定义页面中点击的部分，定义显示部分，就是点击后，区配的内容显示在什么地方。...-- router-link 定义点击后导航到哪个路径下 --> Home <router-link

1.9K2 1

如何轻松愉快的写你的第一个油猴脚本

这玩意简直就是大学生，程序员等等各类宅男的梦中工具，可以实现很多想不到的功能，但是它使用了JS的功能，听到JS，大家可能就有点懵了：我又没学过JS，我怎么轻松的写脚本呢？这不是开玩笑呢嘛？...当然不是，作为一个初学者，现在我来教大家怎么写一个简简单单的油猴脚本。...观察以上代码，我们可以看见一些信息，name呀啥的，我就不说了，我们最重要的就是那个include，这个指的是我们所要应用的网站，有的时候是这个，有的时候是哪个，这个就自己确定了，*表示的是随意，你可以随便填入你自己所需要的个性化网站...，如果有点击，执行里面的内容。...x 的子节点中这个是添加我们的按钮的，我想要将其添加到标题栏，所以选择了最顶部分的一堆按钮之中，这对按钮虽在的标签是,所以直接获取，注意这是一个数组，里面会有很多的按钮

1241 0

手把手教你使用Android原生写一个订票机器人

我们随便开启一个应用，比如Android 的 demo 应用，然后点击里面的按钮看看；我这里打了一个断点，点击这里，我们看到，EventType 为 TYPE_VIEW_CLICKED 的时间被我们捕捉到了...，而且我们可以看到这个事件来源哪个应用，这里是包名为’com.example.myapplication’的应用，同时我们还知道点的是一个 Button，另外下面我还没截图出来的，有这个 Button上的...基于我们上面的简单的demo，我们知道通过AccessibilityService 的功能，我们可以做到捕捉任何 App 的任何事件，事件的类型可以在这里看。其中包括界面的变更、按钮的点击。...我们可以对 editortext 设置内容，对 option 进行选择，对按钮进行点击事件的发送。...一些技巧 1、如何判断当前应用是否是某应用,对，就是通过包名来判断，有人可能会问，我怎么知道包名呢？

4524 0

0CTF h4x0rs.club12 复现

是大家都知道的游戏，不是吗？点击播放猜猜神奇宝贝的名字回答所以可以明白这个游戏是干啥的了。游戏逻辑：点击左下角三角开始，然后在右边的窗格内会显示宠物与选项，还有一个输入框。...他被Chrome的安全策略拦截了！！拦截了！这还日个毛线的站。但是，大佬却提出来了一个新思路，并且带来了一个新的洞洞。先说洞洞吧。查看他人资料页里，含有这么一句js ?...大佬说，他又在client.js发现了这个。 ? 此时的我已经奔溃了，真心服！特别服！贼拉拉的服！也就是说，此时我们可以构造一个按钮，放在class为js-difficulty的元素内。...直接查看元素，可以发现按钮的代码如下，应该是通过jQuery监听的事件，并处理。但是，他监听的是哪个属性呢？，一般来说应该是id。...对js代码审计也有了些许了解。一些骚套路，自动点击，自动跳转。发现大佬们真的好强好强好强。

1.6K7 0

Vue之块级作用域let和var

1.背景 js的作者Brendan Eich公开说明过var其实是js语言设计上的错误，但是这种错误多半不能修复和移除，所以大概在十几年前，Brendan Eich就修复了这个问题，添加了一个新的关键词...].onclick = function() { console.log(i); } } 重大缺陷：无论点击哪个...在for中的i是没有自己的作用域的，且js是异步执行，在js执行完后，才开始渲染页面，那就意味着我们在点击已经渲染出的button时，for循环已经遍历到最后一个，且这个for中的i没有自己的作用域，他是被共享的...，遍历四次他就被改变了四次，所以我们无论点击哪个按钮出现的i都是4....那这时候，为了实现效果就会引入函数（因为var在函数中有自己的作用域），借助函数的作用域让每个i都有自己的作用域，点击按钮出现相应序号。这就是我们js常用的闭包。

1.2K1 0

chrome使用技巧（看了定不让你失望，不错）

回到顶部快速切换文件我一般如果查找每个文件，一般都是打开控制台，在source控制面板里面一个一个去找，看下面的图你就应该知道，这么多文件，你都不知道在哪个目录下面，然后就只能一个一个点开看 ?...回到顶部在源代码中搜索大家都知道如果在要在Elements查看源码，只要定位到Elements面板，然后按ctrl+f就可以了 ? 可是如果你希望在源代码中搜索要怎么办呢？...这个功能位于元素标签的底部，点击“show drawer”按钮，就可看见Emulation --> Sensors. ?...回到顶部格式化凌乱的js源码有时候看到压缩好的一团糟的js，都不知道从何着手去看。chrome控制台有内建的美化代码功能，可以返回一段最小化且格式易读的代码。...Pretty Print的按钮在Sources标签的左下角。 ? 回到顶部颜色选择器当在样式编辑中选择了一个颜色属性时，你可以点击颜色预览，就会弹出一个颜色选择器。

9411 0

你不可不知的腾讯混元大模型前端开发实战技巧

问题 8：echarts柱状图y轴数值加单位背景：echarts是一个常见的 js 图表框架，里面有非常多的配置项和 API，有时候找一个配置反文档要找半天，也不知道怎么去实现想要的效果，这时候混元助手的优势就发挥出来了...点击按钮后，我希望的结果是，我在任意文本框粘贴，都是类似 [腾讯云产业智变·云启未来 - 腾讯](https://cloud.tencent.com/) 这种格式的Markdown链接不知道是不是网站抽风过一次的原因...来问下混元大模型怎么回事：原来是编码问题，直接复制的代码，忘记加head标签里面的meta了，加上就好了。...popup.js点击第一个按钮，发送消息给content.js，content.js接受消息后，判断消息内容是第一个按钮发送过来的，用document.title和window.location.href...还是popup.js，点击第二个按钮，发送消息给content.js，然后根据对应的action，进入第二个条件，向background.js发送消息，background.js接受消息后，获取所有tabs

9592 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云