我怎样才能阻止用户点击的影响？
发布于2023-03-21 22:47 阅读(1250) 评论(0) 点赞(14) 收藏(1)
我正在制作一个 chrome 扩展来编辑被点击的图像的属性。我正在使用一个名为元素选择器的包来选择图像（这是通过弹出窗口中的 html 按钮触发的）。代码有效，我可以更改图像的属性。然而，该包不会停止链接到图像的任何操作，这通常会导致用户被带到一个新页面。如何停止用户在按下弹出窗口中的按钮和选择图像之间的任何操作？先感谢您。
var elementPicker = require('element-picker')
function onClick(elt) {
[.....]
}
elementPicker.init({ onClick })
解决方案
我通常不推荐使用这个，但 CSSpointer-events可以解决这个问题。这个想法是任何元素pointer-events:none都会忽略任何交互。这可以阻止默认的 HTML 交互，例如<a>或<button>以及附加到元素的任何 javascript 操作。
这是模态窗口经常使用的技术，以防止点击“穿过”模态周围的区域。它也应该适用于您所描述的内容。
您可以使用选择器在图像元素或所有元素* {styles...}上设置该样式。如果你走“全部”路线，你需要在你的扩展接口中的任何元素上显式地重新启用指针事件，你仍然需要通过使用“自动”属性来操作。
请记住在扩展完成后重置指针事件，* {pointer-events: initial;}否则页面将完全无法操作。
所属网站分类: 技术文章 > 问答
作者：黑洞官方问答小能手
链接：http://www.qianduanheidong.com/blog/article/509575/5e12d9b163efd1f897d8/
来源：前端黑洞网
任何形式的转载都请注明出处,如有侵权 一经发现 必将追究其法律责任
昵称:
评论内容：(最多支持255个字符)
---无人问津也好，技不如人也罢，你都要试着安静下来，去做自己该做的事，而不是让内心的烦躁、焦虑，坏掉你本来就不多的热情和定力