父级鼠标事件向子级传递了

Question

    $(".card-box").bind({
        mousemove:function(event) {
            //console.log(event)
            var card_x = getTransformValue(event.target.clientWidth, event.offsetX, 0.1);
            var card_y = getTransformValue(event.target.clientHeight, event.offsetY, 0.2);
            var shadow_x = getTransformValue(event.target.clientWidth, event.offsetX, 0.05);
            var shadow_y = getTransformValue(event.target.clientHeight, event.offsetY, 0.05);
            var text_shadow_x = getTransformValue(event.target.clientWidth, event.offsetX, 0.05);
            var text_shadow_y = getTransformValue(event.target.clientHeight, event.offsetY, 0.05);
            //console.log(event.target.clientHeight,event.target.offsetY)
            $(this).find(".floating").css("transform", "rotateX(" + card_y + "deg) rotateY(" + -card_x + "deg)");
            $(this).find(".floating").css("box-shadow", text_shadow_x + "px " + -text_shadow_y + "px 40px rgba(0, 0, 0, .5)");
            $(this).find(".svg").css("filter", "drop-shadow(" + shadow_x + "px " + -shadow_y + "px 4px rgba(0, 0, 0, .6))");
            $(this).find(".text").css("text-shadow", text_shadow_x + "px " + -text_shadow_y + "px 6px rgba(0, 0, 0, .8)");
            return false;
        },
        mouseout: function () {
            $(this).find(".floating").css("transform", "rotateX(0deg) rotateY(0deg)");
        }
    },false);

代码如上，我在$('.card-box')绑定的事件，鼠标移动经过子级时，event.offsetX会读到子级的event里面的数值，请问这个怎么解决？目前有个解决方案就是给子级设置css3：pointer-events: none;但是这玩意ie只兼容到11+，我需要更好的解决方案 = =！

Answer 1

通过event.target判断一下经过的是父级自己，还是内部子元素。