HarmonyOS鸿蒙Next中API Version 6，js开发如何阻止click点击事件穿透？

HarmonyOS鸿蒙Next中API Version 6，js开发如何阻止click点击事件穿透？ 自定义组件写了一个遮罩层，position为fixed定位，显示的时候 width：100%；height：100%；也进行了全屏的遮罩层效果，但是遮罩层下面的点击事件也能够触发，这个该怎么阻止？

3 回复

楼主你好，js开发中，click事件默认是冒泡事件，如果想阻止可以在底层的点击事件上阻止事件往上传递，使用grab:click.bubble；

地址：https://developer.harmonyos.com/cn/docs/documentation/doc-guides-V3/js-framework-syntax-hml-0000001430600513-V3

![image.png](data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUA AAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO 9TXL0Y4OHwAAAABJRU5ErkJggg==)

更多关于HarmonyOS鸿蒙Next中API Version 6，js开发如何阻止click点击事件穿透？的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


加了这些事件后，点击都没有反应了，

在HarmonyOS鸿蒙Next中，使用API Version 6进行JS开发时，可以通过event.stopPropagation()方法阻止点击事件的冒泡，从而防止事件穿透。例如：

element.onclick = function(event) {
    event.stopPropagation();
    // 其他处理逻辑
};

此外，还可以通过event.preventDefault()阻止默认行为，或使用pointer-events: none;样式禁用元素的点击事件。

回到顶部