onclicklistener 相关问题

如何在React中监听iframe内的点击？

我正在使用 iframe 在 React 中显示获取的 HTML 文档，并希望监听 iframe 内 DOM 元素的点击。 例如，我想console.log我已经c的DOM元素...

如何使用回收器视图作为（选项卡布局）来使用用户信息更新片段布局

我想实现这个目标 我的目标是，当用户单击该人时，会将文本颜色更改为蓝色，它将显示个人信息，并且对于所有用户来说都是相同的。所以我很...

使用下拉菜单时Clickevent显示错误位置

我想1:1重播所有点击事件。不幸的是，它不适用于下拉菜单。每当我在下拉列表中选择一个值时，它都会显示错误的位置（请随意在我的代码片段中测试它......

VueJS 点击在移动设备上不起作用，未检测到点击侦听器

我试图找出 VueJS 在点击侦听器上的问题出在哪里。 所以这里我有一个用户可以选择的可能语言列表： CN FR 它 该列表包含在 ... 中 我试图找出 VueJS 在点击侦听器上的问题出在哪里。 所以这里我有一个用户可以选择的可能语言列表： CN FR 它 此列表被包装到 <div> 中，通过使用点击侦听器显示或隐藏列表，问题是它仅适用于桌面而不适用于移动设备 这是我拍摄的一些视频，向您展示问题出在哪里 桌面（此处按预期工作） 移动版（这里不再工作） 这是我现在用于组件的代码 <template> <div @click="toggleList = !toggleList" class="lang-area" title="Change language"> <ul class="lang-data"> <li>{{ currentLanguage | uppercase }}</li> <li :key="index" @click="selectLang(lang)" class="lang-select" v-for="(lang, index) in listLanguages" v-if="toggleList"> {{ lang | uppercase }} </li> </ul> <img alt="list languages" class="lang-list" src="../../static/icons/language-icon.svg"> </div> </template> <script> export default { props: { language: String, }, data() { return { currentLanguage: this.language, toggleList: false, languageList: ['en', 'fr', 'it'], }; }, computed: { listLanguages() { return this.languageList.filter(lang => lang !== this.currentLanguage); }, }, methods: { selectLang(lang) { this.currentLanguage = lang; this.$emit('languageChanged', this.currentLanguage); }, }, }; </script> <style scoped lang="sass"> @import "LanguageList" </style> 如您所见，我使用 toggleList 变量来切换语言列表 通过进行一些测试，如果我单击 <div>，它不会捕获该事件 我什至尝试过其他库，例如 HammerJS 但没有任何效果 我也有类似的问题。 我将 @click 事件放置在锚元素上。它们在桌面上工作得很好，但在手机上或将开发工具更改为响应模式时却不起作用。 <a @click="console.log('clicked')"></a> 这个问题然后让我发现，除了单击事件之外，我还需要添加一个@touchend事件才能使其工作。 <a @click="console.log('clicked')" @touchend="console.log('clicked')"></a> 干杯

设置全屏onClickListener

你好，我对 Kotlin 还很陌生 听说java中可以设置全屏的onClickListener。 所以我问 1-你能在 kotlin 中做同样的事情吗？ 2-如何设置 onClickListener 来构造...

Onclicklistener 部分不起作用，稍后添加以查看

我在布局上有一个 onclicklistener，其中包含两个包含。 其中一个包含内容包含约束布局，单击容器后该布局将可见。 它还应该制作...

通过监听器检查EditText是否为空

我知道有几个答案，但似乎没有一个能解决我的问题： 我有以下代码： myEditText.addTextChangedListener(new TextWatcher() { @覆盖 公开...

Android 按钮 onClick 崩溃

我正在使用android studios，我只是想点击一个简单的按钮来转到另一个活动，但是当我这样做时，我的应用程序每次都会崩溃，我不知道为什么。 这是我的代码

添加事件监听器是不是很奇怪？

<section class="game--section"> <div class="game-space"> <div class="box box1 active-box"></div> <div class="box box2"></div> <div class="box box3"></div> <div class="box box4"></div> <div class="box box5"></div> <div class="box box6"></div> </div> <div class="restart-button">🔁</div> </section> 我有一个包含 6 个子框的 div(.game-space)，其中一个是具有绿色背景的 ('.active-Box) 类的活动框， 所以当我点击活动框时，它会将其类（.active-Box）移动到下一个以这种方式提供绿色背景的框，它一直到最后一个框。 我还有重启按钮，当我点击它时，游戏应该重新启动，就像活动框类被标记到第一个框，然后从这里它再次转移到下一个类并一直到结束框点击 但是，在单击重新启动按钮之前，框之间的移动是一个接一个地线性移动，但是在单击重新启动按钮之后，框被跳过而不是线性移动，跳过一些框之间， 为什么 ？任何解决方案？ 'use strict' const allBox = document.querySelectorAll('.box'); const activeBox = document.querySelector('.active-box') const restartButton = document.querySelector('.restart-button') let active_box_index = activeBox_index_function(); slideBox(allBox[active_box_index]); function slideBox(pass_active_box) { pass_active_box.addEventListener('click', function() { allBox[active_box_index].classList.remove('active-box') allBox[active_box_index + 1].classList.add('active-box') active_box_index = activeBox_index_function() slideBox(allBox[active_box_index]); }) } console.log(allBox); // active box index function activeBox_index_function() { let index; allBox.forEach((el, indx) => { if (el.matches('.active-box')) { index = indx }; }) return index; } // when restart button clicked restartButton.addEventListener('click', function() { allBox[active_box_index].classList.remove('active-box') allBox[0].classList.add('active-box') active_box_index = activeBox_index_function() }) @import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,200;0,300;0,400;0,600;0,700;0,800;0,900;1,800&display=swap'); @import url('https://fonts.cdnfonts.com/css/common-pixel'); * { padding: 0; margin: 0; box-sizing: border-box; } html { font-size: 62.5%; font-family: 'Poppins', sans-serif; color: black; } .game--section { height: 100vh; background-color: #252525; display: flex; justify-content: center; align-items: center; } .game-space { width: 80rem; height: 10rem; padding: 1rem; border-radius: 9px; background-color: #f5f5f5; display: grid; grid-template-columns: repeat(6, 1fr); gap: 1rem; } .box { background-color: tomato; } .active-box { background-color: #099268; cursor: pointer; } .restart-button { font-size: 3rem; cursor: pointer; } <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <link rel="stylesheet" href="style.css"> </head> <body> <section class="game--section"> <div class="game-space"> <div class="box box1 active-box"></div> <div class="box box2"></div> <div class="box box3"></div> <div class="box box4"></div> <div class="box box5"></div> <div class="box box6"></div> </div> <div class="restart-button">🔁</div> </section> <script src="script.js"></script> </body> </html> 你描述的问题是因为事件监听器的积累。 您可以使用以下代码： 'use strict' const allBox = document.querySelectorAll('.box'); const activeBox = document.querySelector('.active-box') const restartButton = document.querySelector('.restart-button') let active_box_index = activeBox_index_function(); slideBox(allBox[active_box_index]); function myFunction(){ allBox[active_box_index].classList.remove('active-box'); if (!((active_box_index + 1)===allBox.length)){ allBox[active_box_index + 1].classList.add('active-box'); } allBox[active_box_index].removeEventListener('click', myFunction); active_box_index = activeBox_index_function(); slideBox(allBox[active_box_index]); } function slideBox(pass_active_box) { if (!((active_box_index + 1)===allBox.length)){ pass_active_box.addEventListener('click', myFunction) } } console.log(allBox); // active box index function activeBox_index_function() { let index; allBox.forEach((el, indx) => { if (el.matches('.active-box')) { index = indx }; }) return index; } // when restart button clicked restartButton.addEventListener('click', function() { allBox[active_box_index].classList.remove('active-box'); allBox[0].classList.add('active-box'); allBox[active_box_index].removeEventListener('click', myFunction); allBox[0].addEventListener('click', myFunction); active_box_index = activeBox_index_function() }) 变化是： 添加removeEventListener() 和其他几个错误修复： 仅当不是最后一个框时才传递类并添加事件监听器。如果需要，您可以将第一个框设置为最后一个框之后的活动框。只需添加一个else语句并在其中添加allBox[0].classList.add('active-box');。 同样不要忘记添加事件监听器.... 希望你觉得这有用！ 编辑：我刚刚发现，如果我们定义函数，我们不必添加removeEventListener()。这是因为如果该函数已经在该目标的事件侦听器列表中，则不会再次添加该函数。但是当我们用匿名函数调用事件监听器时，它是第二次添加的。请参阅this answer和MDN Web Docs about addEventListener().

EventListener 的匿名函数和传递给 EventListener 的定义函数是否工作不同？

我有一个包含 6 个子框的 div(.game-space)，其中一个是具有绿色背景的 ('.active-Box) 类的活动框， 所以当我点击活动框时，它会将它的类（.active-Box）转移到...

AddeventListener 表现怪异？

<section class="game--section"> <div class="game-space"> <div class="box box1 active-box"></div> <div class="box box2"></div> <div class="box box3"></div> <div class="box box4"></div> <div class="box box5"></div> <div class="box box6"></div> </div> <div class="restart-button">🔁</div> </section> 我有一个包含 6 个子框的 div(.game-space)，其中一个是具有绿色背景的 ('.active-Box) 类的活动框， 所以当我点击活动框时，它会将其类（.active-Box）移动到下一个以这种方式提供绿色背景的框，它一直到最后一个框。 我还有重启按钮，当我点击它时，游戏应该重新启动，就像活动框类被标记到第一个框，然后从这里它再次转移到下一个类并一直到结束框点击 但是，在单击重新启动按钮之前，框之间的移动是一个接一个地线性移动，但是在单击重新启动按钮之后，框被跳过而不是线性移动，跳过一些框之间， 为什么 ？任何解决方案？ 'use strict' const allBox = document.querySelectorAll('.box'); const activeBox = document.querySelector('.active-box') const restartButton = document.querySelector('.restart-button') let active_box_index = activeBox_index_function(); slideBox(allBox[active_box_index]); function slideBox(pass_active_box) { pass_active_box.addEventListener('click', function() { allBox[active_box_index].classList.remove('active-box') allBox[active_box_index + 1].classList.add('active-box') active_box_index = activeBox_index_function() slideBox(allBox[active_box_index]); }) } console.log(allBox); // active box index function activeBox_index_function() { let index; allBox.forEach((el, indx) => { if (el.matches('.active-box')) { index = indx }; }) return index; } // when restart button clicked restartButton.addEventListener('click', function() { allBox[active_box_index].classList.remove('active-box') allBox[0].classList.add('active-box') active_box_index = activeBox_index_function() }) @import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,200;0,300;0,400;0,600;0,700;0,800;0,900;1,800&display=swap'); @import url('https://fonts.cdnfonts.com/css/common-pixel'); * { padding: 0; margin: 0; box-sizing: border-box; } html { font-size: 62.5%; font-family: 'Poppins', sans-serif; color: black; } .game--section { height: 100vh; background-color: #252525; display: flex; justify-content: center; align-items: center; } .game-space { width: 80rem; height: 10rem; padding: 1rem; border-radius: 9px; background-color: #f5f5f5; display: grid; grid-template-columns: repeat(6, 1fr); gap: 1rem; } .box { background-color: tomato; } .active-box { background-color: #099268; cursor: pointer; } .restart-button { font-size: 3rem; cursor: pointer; } <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <link rel="stylesheet" href="style.css"> </head> <body> <section class="game--section"> <div class="game-space"> <div class="box box1 active-box"></div> <div class="box box2"></div> <div class="box box3"></div> <div class="box box4"></div> <div class="box box5"></div> <div class="box box6"></div> </div> <div class="restart-button">🔁</div> </section> <script src="script.js"></script> </body> </html> 您可以按以下方式更新您的代码： 删除对 slideBox 的递归调用并增加 active_box_index 变量。 检查 active_box_index 是否已到达框的末尾，如果是则将其重置为 0. 在 restartButton event 侦听器中将 active_box_index 变量重置为 0 而不是 calling activeBox_index_function(). 'use strict' const allBox = document.querySelectorAll('.box'); const activeBox = document.querySelector('.active-box') const restartButton = document.querySelector('.restart-button') let active_box_index = activeBox_index_function(); slideBox(allBox[active_box_index]); function slideBox(pass_active_box) { pass_active_box.addEventListener('click', function() { allBox[active_box_index].classList.remove('active-box'); active_box_index++; //increment the index instead of using activeBox_index_function() to calculate it again if (active_box_index === allBox.length) { //if reached the end of the boxes, reset the index to 0 active_box_index = 0; } allBox[active_box_index].classList.add('active-box'); }) } //console.log(allBox); // active box index function activeBox_index_function() { let index; allBox.forEach((el, indx) => { if (el.matches('.active-box')) { index = indx }; }) return index; } // when restart button clicked restartButton.addEventListener('click', function() { allBox[active_box_index].classList.remove('active-box') allBox[0].classList.add('active-box') active_box_index = 0; //reset the index to 0 when restarting the game }) @import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,200;0,300;0,400;0,600;0,700;0,800;0,900;1,800&display=swap'); @import url('https://fonts.cdnfonts.com/css/common-pixel'); * { padding: 0; margin: 0; box-sizing: border-box; } html { font-size: 62.5%; font-family: 'Poppins', sans-serif; color: black; } .game--section { height: 100vh; background-color: #252525; display: flex; justify-content: center; align-items: center; } .game-space { width: 80rem; height: 10rem; padding: 1rem; border-radius: 9px; background-color: #f5f5f5; display: grid; grid-template-columns: repeat(6, 1fr); gap: 1rem; } .box { background-color: tomato; } .active-box { background-color: #099268; cursor: pointer; } .restart-button { font-size: 3rem; cursor: pointer; } <section class="game--section"> <div class="game-space"> <div class="box box1 active-box"></div> <div class="box box2"></div> <div class="box box3"></div> <div class="box box4"></div> <div class="box box5"></div> <div class="box box6"></div> </div> <div class="restart-button">🔁</div> </section>

短时间内检测到屏幕上的 5 次点击

我一直在尝试使用我从此处复制并针对 kotlin 和 setOnClickListener() 修改的代码来实现此代码以在 3 秒内检测屏幕上的 5 次点击。 私人 lateinit 变种

为什么方法事件侦听器单击仅在 for 循环中第一次起作用

我想在每次点击按钮“slotsAvailables”和“buttonBooking”时运行函数“checkSlotsChoosen”，但它只适用于第一次点击，在每个

jquery 中的函数未定义

任何人都请帮助我， 我有一个使用 Code Igniter 3 构建的项目， 所以原理图是： 我有 2 个文件视图，我调用了 formAdd.php 和 detail.php 我命名的 1 个文件控制器是 Uangmuka.php 为了...

Kotlin RecyclerView：监听器不工作

Kotlin 新手。除了 setOnClicklistener，我有一个 recyclerview 工作正常。单击该行未检测到。 不会调用 OnClick。 类 RecyclerAdapter（私有 var 侦听器：OnItemClickLi ...

为什么我的 OnClickListener 没有在 Android Fragment 中触发？

我是不是遗漏了一些代码？ @覆盖 public View onCreateView(LayoutInflater inflater, ViewGroup 容器, 捆绑 savedInstanceState) { 查看

从地图上删除标记

我有一张地图，我点击它并返回纬度和经度并将其放入表单输入的值，但是当我点击时我想让之前的标记消失，我该怎么做？ 有地图

JS removeEventListener 不起作用。为什么？

我有一堆 div（current_items）。每个 div 都有一个按钮——“删除 div”(remove_buttons)。 每个按钮都有一个点击监听器。单击任何按钮后，我需要所有听众的所有...

OnClick 方法在 Quiz App 的 NavigationView DrawerLayout 中不起作用

我正在开发一个测验应用程序，其中有一个 HomeFragment，其中包含一个带有 DrawerLayout 的 NavigationView。我创建了一个单独的类“NavigationHelpline”用于绑定布局和实现...

JavaScript 中的点击事件排队

每当单击一定数量的不同按钮之一时，我正在使用 addEventListener 执行一些不同的代码。 我想控制何时执行此代码。更多