事件穿透

最新推荐文章于 2023-05-18 11:30:06 发布

weixin_33965305

最新推荐文章于 2023-05-18 11:30:06 发布

阅读量159

点赞数

文章标签： python

原文链接：https://my.oschina.net/u/232595/blog/1630137

版权

2019独角兽企业重金招聘Python工程师标准>>>

<div class="wrap">
<table>
<tr><td>a</td><td>b</td></tr>
</table>
<canvas id="canvas"></canvas>
</div>
<style>
.wrap {
	position: relative;
	width: 1600px;
}
.wrap table {
	width: 100%;
}
#canvas {
	position: absolute;
	left: 0;
	top: 0;
	pointer-events: none;
}
</style>

ie11、firefox、chrome等现代浏览器

只需要将上层元素添加css样式

pointer-events: none;

兼容ie老版本的方法：

if(navigator.appName == "Microsoft Internet Explorer"&&parseInt(navigator.appVersion.split(";")[1].replace(/[ ]/g, "").replace("MSIE",""))<=9){
    $('#canvas').on('click', function (event) {
        var x = event.clientX;
        var y = event.clientY;
        var e = jQuery.Event(event.type, { pageX: x, pageY:y });
        $("table td").each(function(){
            var tx = $(this).offset().left;
            var ty = $(this).offset().top;
            var tx1 = tx + $(this).width();
            var ty1 = ty + $(this).height();
            if(x>=tx && x<= tx1 && y>=ty && y<=ty1){
                $(this).trigger(e);
                return false;
            }
        });
    });
}
$('table').on('click', 'td', function () {
   alert("底层元素点击事件被触发了")
});

转载于:https://my.oschina.net/u/232595/blog/1630137