<script> let box = document.querySelector('#box'); let select = document.querySelector('.select'); let choiced = new Array(0, 0, 0, 0); for (let i = 0; i < box.children.length - 1; i++) { let child = box.children[i].querySelectorAll('dd'); for (let j = 0; j < child.length; j++) { child[j].addEventListener('click', function(e) { if (choiced[i] == 0) { let dd = document.createElement('dd'); dd.innerHTML = `<dd>${e.target.text}<span>X</span></dd>`; e.target.style.color = 'red'; select.appendChild(dd); } choiced[i] = 1; let del = document.querySelectorAll('span'); for (let k = 0; k < del.length; k++) { del[k].addEventListener('click', function(e) { select.removeChild(select.children[k + 1]); e.target.style.color = ''; choiced[i] = 0; }) } }) } } </script>为什么在触发这个事件时会同时触发多次呢
时间: 2023-06-24 20:04:37 浏览: 48
这段代码中有多个事件监听器,其中包含了嵌套的循环。在每次点击事件中,会执行外层循环和内层循环,因此会多次绑定事件监听器,导致同一个元素被绑定了多个重复的事件监听器,从而导致多次触发。为了避免这种情况,可以考虑将内层循环的事件监听器提取到外层循环之外。同时,建议使用事件委托,将事件监听器绑定到父元素上,以便统一管理和处理。
相关问题
<div data-current="yes"></div> <script> var ele= document.querySelector('div'); ____.current= 'no'; </script>
这个代码片段中的变量名 "____" 是不合法的,需要替换成一个合法的变量名。此外,代码中使用了一个未定义的属性 "current",应该先定义这个属性再给它赋值。下面是一个修正后的代码:
```
<div data-current="yes"></div>
<script>
var ele = document.querySelector('div');
ele.setAttribute('data-current', 'no');
</script>
```
这个代码片段的作用是找到文档中第一个 `<div>` 元素,将它的 `data-current` 属性从 "yes" 改成 "no"。
``` let box = document.querySelector('div'); ```
这行代码使用了JavaScript的DOM操作,用于获取文档中第一个匹配选择器的元素。
- `let` 是用于声明变量的关键字,这里声明了一个名为 `box` 的变量。
- `document` 是JavaScript中表示当前文档的对象。
- `querySelector()` 是 `document` 对象的方法,用于根据指定的选择器获取文档中的元素。
- `'div'` 是一个选择器,表示要获取的元素是 `<div>` 标签。
综上所述,这行代码的作用是获取文档中第一个 `<div>` 元素,并将其赋值给变量 `box`。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
已用IE打开了B网页后,怎么样用JS实现在点击链接后用火狐打开/ckb/main.do?action=getMain#这个链接?<html> <head> <meta charset="utf-8"> <title>B网页</title> </head> <body> 我需要打开这个链接 <script> var link = document.querySelector('a[href="/ckb/main.do?action=getMain#"]'); link.onclick = function() { window.open(link.href, "_blank"); return false; }; </script> </body> </html>
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
以下代码为什么不能实现从IE打开的B网页点击链接后另外火狐页面打开链接?<html> <head> <meta charset="utf-8"> <title>B网页</title> </head> <body> 我需要打开这个链接 <script> var link = document.querySelector('a[href="/ckb/login.do?action=login"]'); link.onclick = function() { // 使用浏览器内置的方法打开链接,指定火狐浏览器为打开方式 window.open(link.href, "firefox.exe"); } return false; }; </script> </body> </html>
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)