事件穿透

<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>

ie十一、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("底層元素點擊事件被觸發了")
});