js为多个具有相同类名的元素添加touchstart事件只有一个能触发,而且父元素没有touchstart事件,这是为什么
时间: 2024-02-22 11:01:19 浏览: 18
这种情况可能是因为你使用了类数组对象,而不是真正的数组。类数组对象虽然也有length属性和索引,但是它们并不具备数组的所有方法,如forEach、map等。因此,如果你使用类数组对象来添加事件监听器,只会给其中一个元素添加事件,而不是所有元素。为了解决这个问题,你可以将类数组对象转换为真正的数组,或者使用for循环遍历每个元素并分别给它们添加事件监听器。另外,你也可以使用现代浏览器支持的forEach方法来遍历类数组对象并给每个元素添加事件监听器。
相关问题
js为多个具有相同类名的元素添加touchstart事件只有一个能触发,这是为什么
这种情况也很可能是因为事件冒泡导致的。当你为多个具有相同类名的元素添加touchstart事件时,如果其中一个元素触发了该事件,它会向上冒泡到父元素,如果父元素也有touchstart事件,那么父元素的事件也会被触发,因此你可能会看到只有一个事件被触发。为了避免这种情况,你可以在被点击的元素上使用e.stopPropagation()方法来阻止事件冒泡,或者使用e.preventDefault()方法来阻止默认动作。另外,你也可以使用事件委托的方式,将事件绑定在父元素上,然后通过e.target获取到被点击的元素。这种方式可以避免给每个元素都绑定事件的冗余代码。
如果父元素类名都一样,那么通过子元素获取到的父元素怎么能保证就是那一个
如果父元素的类名都一样,那么通过子元素获取到的父元素就不能保证是哪一个了,因为可能存在多个具有相同类名的父元素。此时,我们可以通过其他属性来区分这些相同类名的父元素,比如id属性、data属性等。以下是一个示例代码:
```
// 获取子元素
var child = document.querySelector('.child');
// 获取父元素
var parent = child.parentElement;
// 获取具有相同类名的所有父元素
var parents = document.querySelectorAll('.parent-class');
// 遍历父元素,找到与当前父元素相同的那一个
for (var i = 0; i < parents.length; i++) {
if (parents[i] === parent) {
// 如果找到了与当前父元素相同的那一个,则执行相应操作
console.log('Found parent element with class parent-class!');
break;
}
}
```
在上面的代码中,我们首先使用querySelector方法获取到一个class为child的子元素,然后使用parentElement属性获取到它的父元素。接着,使用querySelectorAll方法获取所有具有相同类名的父元素,并使用循环遍历这些父元素,找到与当前父元素相同的那一个。最后,如果找到了与当前父元素相同的那一个,则可以执行相应的操作。
相关推荐
![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)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)