point-events:none

最新推荐文章于 2024-05-30 16:30:32 发布

@hxl

最新推荐文章于 2024-05-30 16:30:32 发布

阅读量3k

点赞数

本文链接：https://blog.csdn.net/qq_38105960/article/details/101083095

版权

pointer-events: none; //如同disabled 属性，可以实现事件的完全禁用。如果其他标签需要类似的禁用效果，这个链接，你是点不了的，并且 hover 也没有效果。
（值得一提的是，仅仅是鼠标事件失效，用 tab 键还是可以选中该链接的然后 enter 打开，这个时候可以去掉 a 标签的 href 属性，就不能让 tab 键选中了）

案例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>跟随鼠标移动（大图展示）</title>
    <style type="text/css">
        html, body {
            overflow: hidden;
        }

        body, div, ul, li {
            margin: 0;
            padding: 0;
        }

        #box ul {
            width: 768px;
            height: 172px;
            list-style-type: none;
            margin: 10px auto;
        }

        #box li {
            float: left;
            width: 170px;
            height: 170px;
            cursor: pointer;
            display: inline;
            border: 1px solid #ddd;
            margin: 0 10px;
        }

        #box li.active {
            border: 1px solid #a10000;
        }

        #box li img {
            width: 170px;
            height: 170px;
            vertical-align: top;
        }

        #big {
            position: absolute;
            width: 400px;
            height: 400px;
            border: 2px solid #ddd;
            display: none;
            pointer-events: none;
        }

        #big div {
            position: absolute;
            top: 0;
            left: 0;
            width: 400px;
            height: 400px;
            opacity: 0.5;
            filter: alpha(opacity=50);
            /*background: #fff url(img/loading.gif) 50% 50% no-repeat;*/
        }
    </style>
    <script src="jquery-1.12.4.js"></script>
    <script>
    $(function(){
    $('#box li').on('mouseenter',function () {
        // console.log($(this).find('img').attr('src'));
        $('#box li').on('mousemove',function (e) {
            // console.log(e.clientX,e.clientY);
            var w=$(window).width();
            var bigW=$('#big').width();
            if(w-e.clientX>bigW){
                $('#big').css({'left':e.clientX,'top':e.clientY})
            }else {
                $('#big').css({'left':e.clientX-bigW,'top':e.clientY})
            }
        })
        $('#big').css('display','block');
        $('#big div').empty().append('<img src="'+$(this).find('img').attr('src')+'" width="100%" height="100%">')
    })
    $('#box li').on('mouseleave',function () {
        $('#big').css('display','none');
    })
})
    </script>
</head>
<body>
<div id="box">
    <ul>
        <li><img src="http://www.fgm.cc/learn/lesson5/img/shirt_1.jpg"/></li>
        <li><img src="http://www.fgm.cc/learn/lesson5/img/shirt_2.jpg"/></li>
        <li><img src="http://www.fgm.cc/learn/lesson5/img/shirt_3.jpg"/></li>
        <li><img src="http://www.fgm.cc/learn/lesson5/img/shirt_4.jpg"/></li>
    </ul>
</div>
<div id="big">
    <div>
        <img src="http://www.fgm.cc/learn/lesson5/img/shirt_1.jpg" width="100%" height="100%">
    </div>
</div>
</body>
</html>

该案例中鼠标移动到box中li的图片时，对应的id为big的盒子显示并且跟着鼠标移动，在id为 big的盒子未添加pointer-events: none;big的盒子会不停闪动。出现原因当鼠标移动到box上时，id为 big的盒子出现在li的盒子上鼠标之下，使得鼠标针对li的移动事件受到影响。解决方式就是为id为big的盒子添加样式pointer-events: none;

出现场景2：在放大镜案例中，为box添加鼠标移动事件，给遮罩层设置left和top 使鼠标永远在遮罩层中间，而在获取鼠标的移动时的坐标时（使用jquery中offsetX，offsetY系列），鼠标位置不准确
解决方式：为遮罩层添加样式point-event：none

@hxl

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
point-events:none

pointer-events: none; //如同disabled 属性，可以实现事件的完全禁用。如果其他标签需要类似的禁用效果，这个链接，你是点不了的，并且 hover 也没有效果。（值得一提的是，仅仅是鼠标事件失效，用 tab 键还是可以选中该链接的然后 enter 打开，这个时候可以去掉 a 标签的 href 属性，就不能让 tab 键选中了）案例：<!DOCTYPE html...
复制链接

扫一扫