阻止默认行为 鼠标事件 禁止选中

阻止默认行为

默认行为：如鼠标按下右键时会出现菜单就是默认行为
e.preventDefault() 不兼容低版本IE
兼容低版本IE是return false （要写在代码最后面）

document.oncontextmenu = function ( e ){ //右键菜单事件
            e = e || window.event;
            alert( 1 );
        }
弹出右键菜单
document.oncontextmenu = function ( e ){ //右键菜单事件
            e = e || window.event; 
            e.preventDefault()// 阻止默认事件( 不兼容IE8及以下 )
            alert( 1 );
        }
没有弹出右键菜单

兼容IE8及以下 return false 要写在最后面 不然后面代码没办法执行

document.oncontextmenu = function ( e ){
            e = e || window.event;
            // e.preventDefault();
            alert( 1 );
            return false;
        }

注意：用注册时return false在主流浏览器没办法用 在IE8及其以下可以阻止

document.addEventListener( 'contextmenu' , function ( e ){
    alert( 1 );
    return false;
})
主流浏览器
document.attachEvent( 'oncontextmenu' , function ( e ){
    alert( 1 );
    return false;
})
Animation.gif

在企业中拿到代码我们不知道之前写的是直接绑定还是注册绑定
我们就要做兼容

e.preventDefault ? e.preventDefault() : e.returnValue = false;

注意：要 e.returnValue 事件对象下的returnValue

案例 自定义右击菜单

<style type="text/css">
    /*清除样式*/
    *{margin: 0;padding: 0;}
    ul li{list-style-type: none;}
    a{text-decoration: none; color: inherit;}
    /*---------------------------------------------------*/
    div{
        display: none;
        position: absolute;
        width: 200px;
    }

    div li{
        width: 100%;
        height: 30px;
    }



</style>
</head>
<body>
    <div id='box'>
        <ul>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
    </div>
    <script type="text/javascript">
        var oBox = document.getElementById( 'box' ),
            aLi = oBox.children[0].children,
            arrColor = [ 'red' , 'green' , 'skyblue' ],
            length = aLi.length,
            cDownX,cDownY;
        console.log( length );
        for (var i = 0; i < length; i++) {
            aLi[i].style.background = arrColor[i%3];
            addEvent( aLi[i] , 'click' ,function( e ){
                e = e || window.event;
                e.cancelBubble = true;
            } )
        }

        // 先阻止默认行为

        addEvent( document , 'contextmenu' , function ( e ){
            e = e || window.event;
            oBox.style.display = 'block';
            // 获取右击的坐标
            cDownX = e.clientX;
            cDownY = e.clientY;

            oBox.style.top = cDownY + 'px';
            oBox.style.left = cDownX + 'px';

            e.preventDefault ? e.preventDefault() : e.returnValue = false;

        })

        addEvent( document , 'click' , function (){
            oBox.style.display = 'none';
        } )



        function addEvent( obj , type ,eFn ){
            function fn( e ){
                eFn.call( obj , e )
            }
            if( window.addEventListener ){
                obj.addEventListener( type , fn ,false )
            } else {
                obj.attachEvent( 'on' + type , fn )
            }
        }


    </script>
</body>
Animation.gif

滚轮事件 onmousewheel
可以作用在任何一个盒子上（不一定要有滚动条）
不兼容火狐

<style type="text/css">
    /*清除样式*/
    *{margin: 0;padding: 0;}
    ul li{list-style-type: none;}
    a{text-decoration: none; color: inherit;}
    /*---------------------------------------------------*/

    #box{
        overflow: hidden;
        width: 100px;
        height: 100px;
    }
</style>
</head>
<body>
    <div id="box">
        是是进介齐家务增进百埯地是是进介齐家务增进百埯地是是进介齐家务增进百埯地是是进介齐家务增进百埯地是是进介齐家务增进百埯地是是进介齐家务增进百埯地是是进介齐家务增进百埯地是是进介齐家务增进百埯地是是进介齐家务增进百埯地
    </div>
    <script type="text/javascript">
        var oBox = document.getElementById( 'box' );
        addEvent( oBox , 'mousewheel' , function(){
            console.log( 2 )
        })


        function addEvent( obj , type ,eFn ){
            function fn( e ){
                eFn.call( obj , e )
            }
            if( window.addEventListener ){
                obj.addEventListener( type , fn ,false )
            } else {
                obj.attachEvent( 'on' + type , fn )
            }
        }
    </script>
</body>
滚轮事件

兼容火狐 只有用注册去绑定

obj.addEventListener( ' DOMMouseScroll' , fn )

<script type="text/javascript">
        var oBox = document.getElementById( 'box' );
        addEvent( oBox , 'DOMMouseScroll' , function(){
            console.log( 2 )
        })

        function addEvent( obj , type ,eFn ){
            function fn( e ){
                eFn.call( obj , e )
            }
            if( window.addEventListener ){
                obj.addEventListener( type , fn ,false )
            } else {
                obj.attachEvent( 'on' + type , fn )
            }
        }
    </script>
Animation.gif

滚轮方向 e.wheelDelta 判断方位
不兼容火狐
1、120的倍数
2、往手心内是负 （ 向下滚 ）
3、往手机外是正 （ 向上滚 ）

<script type="text/javascript">
        var oBox = document.getElementById( 'box' );
        addEvent( oBox , 'mousewheel' , function( e ){
            console.log( e.wheelDelta )
        })

        function addEvent( obj , type ,eFn ){
            function fn( e ){
                eFn.call( obj , e )
            }
            if( window.addEventListener ){
                obj.addEventListener( type , fn ,false )
            } else {
                obj.attachEvent( 'on' + type , fn )
            }
        }
    </script>
Animation.gif

兼容火狐 e.detail 判断方位

1、3的倍数
2、往手心内是正 （ 向下滚 ）
3、往手机外是负 （ 向上滚 ）

<script type="text/javascript">
        var oBox = document.getElementById( 'box' );
        addEvent( oBox , 'DOMMouseScroll' , function( e ){
            console.log( e.detail )
        })

        function addEvent( obj , type ,eFn ){
            function fn( e ){
                eFn.call( obj , e )
            }
            if( window.addEventListener ){
                obj.addEventListener( type , fn ,false )
            } else {
                obj.attachEvent( 'on' + type , fn )
            }
        }
    </script>

兼容写法

<script type="text/javascript">
        /*
         兼容写法
            思路:
                火狐要用注册事件来添加 只有用addEventListener  attachEvent 来添加

                所以要先兼容添加事件的写法


        */
        // document.onmousewheel = function (){

        // }
        addMouseWheel( document , function ( e , d ){
            console.log( d );//通过判断d可以知道哪个方向
        } )

        function addMouseWheel( obj , eFn ){
            function fn( e ){
                e = e || window.e;
                var d = e.wheelDelta/120 || -e.detail/3; //获取一下数值,把2个统一都变成1 统一为正数
                eFn.call( obj , e , d );
            }
            if( document.addEventListener ){ //添加事件兼容 
                //走这里说明浏览器不是IE了 下来要判断一下是不是火狐

            /*  document.onmousewheel
                在非火狐浏览器是null  注意 如果有存在 onmousewheel这个属性是null 只是空指针
                在火狐浏览器是undefined
                但如果有给  document.onmousewheel 添加事件 就不是null 所以要先在js里创建一个盒子 防止污染;
                js里添加盒子不可能会被污染到
            */
                var createBox = document.createElement( 'div' );
                
            /*
                if( createBox.onmousewheel === null ){
                    //说明不是火狐浏览器
                    obj.addEventListener( 'mousewheel', fn );
                } else {
                    //火狐浏览器
                    obj.addEventListener( 'DOMMouseScroll' , fn )
                }
            */
                // 可以写成 
                obj.addEventListener( (createBox.onmousewheel === null ? 'mousewheel' :  'DOMMouseScroll' ) , fn )
            } else {
                obj.attachEvent( 'onmousewheel' , fn )
            }
        }

        // 最简写法

/*
        function addMouseWheel( obj , eFn ){
            function fn( e ){
                e = e || window.e;
                var d = e.wheelDelta/120 || -e.detail/3; 
                eFn.call( obj , e , d );
            }
            if( document.addEventListener ){ 
                var createBox = document.createElement( 'div' );
                obj.addEventListener( (createBox.onmousewheel === null ? 'mousewheel' :  'DOMMouseScroll' ) , fn )
            } else {
                obj.attachEvent( 'onmousewheel' , fn )
            }
        }

* /
  </script>

案例 图片放大缩小

<body>
<img src="1.JPEG" height="" width=""/>
<script>
    var oImg = document.getElementsByTagName( 'img' )[0],
        ImgW = oImg.offsetWidth;
    addMouseWheel( document , function ( e , d ){
        e = e || window.event;
        ImgW -= d*5;
        oImg.style.width = ImgW + 'px';
        e.preventDefault ? e.preventDefault() : e.returnValue = false;
    })


    function addMouseWheel( obj , eFn ){
        function fn( e ){
            e = e || window.e;
            var d = e.wheelDelta/120 || -e.detail/3;
            eFn.call( obj , e , d );
        }
        if( obj.addEventListener ){
            var createBox = document.createElement( 'div' );
            obj.addEventListener( (createBox.onmousewheel === null ? 'mousewheel' :  'DOMMouseScroll' ) , fn )
        } else {
            obj.attachEvent( 'onmousewheel' , fn )
        }
    }

</script>

</body>

阻止选中onselectstart

addEvent( document , 'selectstart' , function( e ){
  e = e || window.event;
  e.preventDefault ? e.preventDefault() : e.returnValue = false
})

区别鼠标左中右键

e.which 如果是1 鼠标左键 2鼠标中键 3鼠标右键

document.onmousedown = function ( e ) {
            console.log( e )
        }
image.png
document.onmousedown = function ( e ) {
           if( e.which === 1 ){
             alert( '我按下的鼠标左键' )
          } else if ( e.which ===3 ){
            alert( '我按下的鼠标右键' )
           }
        }
最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成，浏览时请结合常识与多方信息审慎甄别。
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

相关阅读更多精彩内容

  • jquery 阻止默认行为
    一、阻止事件的默认行为： e.preventDefault() eg: function jqFun(){ /...
    janey_默阅读 882评论 0赞 0
  • 阻止默认行为
    一。 网页中的元素都有自己的默认行为，比如点击a标签的时候会自动跳转、点击提交按钮后表单会提交，有时我们需要阻止默...
    Suoz阅读 632评论 0赞 0
  • 【基础】阻止默认行为
    阻止默认行为 html js
    JerichoPH阅读 299评论 0赞 0
  • 事件类型
    本节介绍各种常见的浏览器事件。 鼠标事件 鼠标事件指与鼠标相关的事件，主要有以下一些。 click 事件，dblc...
    许先生__阅读 2,959评论 0赞 4
  • 黄山游记
    十二月中旬，与好友相约再登黄山。说再登，是因为我以前去过一次，转眼间十一年过去了。成行于十二月十一日。中午一点，小...
    俗然阅读 881评论 8赞 10

友情链接更多精彩内容