e.preventDefault 和事件冒泡
时间: 2024-06-01 20:07:59 浏览: 12
`e.preventDefault()` 是阻止事件的默认行为,例如阻止链接的跳转或者表单的提交。它是防止浏览器执行事件的默认操作,而不是防止事件传播。
事件冒泡是指当一个元素上的事件被触发时,该事件会向上冒泡,直到传播到DOM树的根节点。在这个过程中,事件会触发每个祖先元素的相应事件处理程序。如果没有被阻止,事件将一直冒泡到 `window` 对象。
在事件处理程序中,通过 `e.stopPropagation()` 可以阻止事件的进一步传播,即停止事件冒泡。这意味着事件不会触发祖先元素的事件处理程序,但仍然会触发当前元素上的其他事件处理程序。
相关问题
uni-app canvas点击事件preventDefault(
uni-app 中的 canvas 点击事件可以通过 `canvas` 组件的 `bindtap` 属性来实现。但是,由于 `canvas` 组件本身并不支持事件冒泡,因此在 `canvas` 上绑定的点击事件默认会阻止页面滚动,而不是触发点击事件。如果需要在 `canvas` 上实现点击事件,可以通过以下两种方式解决:
1. 在 `canvas` 组件上添加 `catchtap` 属性,将点击事件捕获并阻止冒泡,从而避免触发页面滚动。示例代码如下:
```html
<canvas canvas-id="myCanvas" catchtap="handleTap"></canvas>
```
2. 在 `canvas` 组件内部手动监听点击事件,并通过 `canvas` 的 `getBoundingClientRect()` 方法获取 `canvas` 的位置和大小信息,判断点击位置是否在 `canvas` 区域内。示例代码如下:
```html
<canvas canvas-id="myCanvas" id="canvas"></canvas>
```
```javascript
const canvas = document.getElementById('canvas')
canvas.addEventListener('click', (e) => {
const rect = canvas.getBoundingClientRect()
const x = e.clientX - rect.left
const y = e.clientY - rect.top
if (x >= 0 && x <= rect.width && y >= 0 && y <= rect.height) {
// 点击在 canvas 区域内
// 处理点击事件
}
})
```
js 禁止冒泡 禁止透传
在JavaScript中,禁止事件冒泡和透传的方法有几种方式可以实现。
1. 使用`e.stopPropagation()`方法可以阻止事件冒泡,但不会阻止浏览器的默认行为。这个方法只能在支持W3C的浏览器中使用。<span class="em">1</span><span class="em">2</span><span class="em">3</span>
#### 引用[.reference_title]
- *1* *3* [事件穿透与禁止穿透(e.stopPropagation()、e.preventDefault()、return false)](https://blog.csdn.net/dmr123456/article/details/117509483)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v92^chatsearchT3_1"}}] [.reference_item style="max-width: 50%"]
- *2* [js阻止事件传播/穿透(冒泡和捕获)](https://blog.csdn.net/w_____w_____/article/details/109770264)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v92^chatsearchT3_1"}}] [.reference_item style="max-width: 50%"]
[ .reference_list ]
相关推荐
![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)