223
文章
5
说说
65
评论
113845
访问

个人博客网站:prettywordpress.com(吃饭用大碗的程序猿)

最新评论
qq_avatar
1月前,”ヘル”在《码农=新生代农民工》
说:打卡@[huaixiao]
qq_avatar
2月前,”肋巴骨”在《Win10系统桌面一直闪屏自动刷新怎么办》
说:不错啊,这是谁写的教程,真棒
qq_avatar
3月前,”逗小沫”在《2021最新PhpStorm+wamp+Xdebug调试wordpress》
说:大佬不考虑加个灯箱吗,图片不能放大
qq_avatar
3月前,”逗小沫”在《2021最新PhpStorm+wamp+Xdebug调试wordpress》
说:pjax失效咋办,F12显示已取消
qq_avatar
3月前,”热爱”在《2021最新PhpStorm+wamp+Xdebug调试wordpress》
说:测试Markdown语法加表情 OωO@(暗地观察)@[哈哈]@[ganga]
A+

实现div元素点击穿透和阻止穿透

标签: 最后编辑:2020年9月16日

前言:大家可以看到网页上有很多小蓝点,这是因为我的网页因为添加了canvas和它自带的点击事件,所以有时候在点击的时候搜索或者评论框留言的时候会被canvas的元素挡住,所以我只能把canvas的点击事件禁止了。效果就是网页上展示的样子,下面提供了元素穿透点击的或者阻止穿透的方法,大家可以根据自己的需求选择。

一、阻止点击穿透,上层点击时加上下面这句,阻止事件冒泡到父元素

event.stopPropagation();

二、点击穿透到下面一层,不点击上层,为上层添加下面样式代码即可

-webkit-pointer-events: none;
-moz-pointer-events: none;
-ms-pointer-events: none;
-o-pointer-events: none;
pointer-events: none;

知识共享署名-非商业性使用-相同方式共享 4.0 国际许可协议

发表一下你的评论呗

回复评论代表你同意网站的 隐私政策

... 友情提示 请保留版权标识
复制成功!
目录