浏览器事件兼容性问题

一、背景透明的元素在 ie 里 加不上事件的解决方法

　　场景：

<div class="box">
    <div class="box_bj"></div>  <!--box_bj 为宽高自适应父级大小,背景透明  -->
</div>

<script type="text/javascript">
    $('.box_bj').on('click',function(){
        alert('box_bj被点击了')  // 在IE 低版本下,点击没反应。
    })
</script>

　　解决方案：

<style type="text/css">
    /* 方法一 */
    .box_bj{background-image: url("data:image/gif, base64,AAAA");}

    /* 方法二  （随便找张图片做背景图片，然后调整位置让其不可见） */
    .box_bj{background: url(styles/images/test.jpg) 0 10000px no-repeat;}
</style>

 二、jquery 鼠标滚轮事件兼容写写法

　　兼容写法：

    $(function(){
        $(document).on("mousewheel DOMMouseScroll", function (e) {
            
            /*这条是网上搜到滚轮对象兼容性判断，但并不好用*/
            /*var delta = (e.originalEvent.wheelDelta && (e.originalEvent.wheelDelta > 0 ? 1 : -1)) ||  // chrome & ie
                        (e.originalEvent.detail && (e.originalEvent.detail > 0 ? -1 : 1));        // firefox
                        */

            /*这个自己写的，兼容谷歌火狐ie*/                
            var delta = e.originalEvent.wheelDelta || (e.originalEvent.detail && (e.originalEvent.detail > 0 ? -1 : 1));  
            if (delta > 0) {
                // 向上滚
                console.log("wheelup");
            } else if (delta < 0) {
                // 向下滚
                console.log("wheeldown");
            }    
        });
    })

　　阻止事件频繁重复触发：

    $(function(){
        var valve = true;
        $(document).on("mousewheel DOMMouseScroll", function (e) {
            var delta = e.originalEvent.wheelDelta || (e.originalEvent.detail && (e.originalEvent.detail > 0 ? -1 : 1));  
            if(valve){
                valve = false;
                if (delta > 0) {
                    setTimeout(function(){
                        // 向上滚
                         console.log("wheelup");
                         valve = true;
                    },200)
                } else if (delta < 0) {
                    setTimeout(function(){
                        // 向下滚
                        console.log("wheeldown");
                        valve = true;
                    },200)
                }
            }             
        });
    })

    // 上面是开关加定时器的写法，功能是实现了， 但如果用类似于animate的事件完成回调 去打开开关会更好些。