程序员最近都爱上了这个网站  程序员们快来瞅瞅吧!  it98k网:it98k.com

本站消息

站长简介/公众号

  出租广告位,需要合作请联系站长


+关注
已关注

分类  

暂无分类

标签  

暂无标签

日期归档  

暂无数据

我怎样才能阻止用户点击的影响?

发布于2023-03-21 22:47     阅读(1118)     评论(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/

来源:前端黑洞网

任何形式的转载都请注明出处,如有侵权 一经发现 必将追究其法律责任

14 0
收藏该文
已收藏

评论内容:(最多支持255个字符)