2016年5月27日下午（妙味课堂js基础-3笔记三（事件））

一、默认行为

　　1. 什么是事件的默认行为（默认事件）

　　　　（1）浏览器不需要我们去编写，浏览器自身就已经具备的功能；（点击右键弹出页面菜单）

　　　　（2）如何阻止默认行为

　　2. 上下文菜单：oncontextmenu（右键菜单）

<script type="text/javascript">
        document.oncontextmenu=function () {
            alert("a")
        };
    </script>

　　点击右键就会弹出a，且会出现右键菜单；

<script type="text/javascript">
        document.oncontextmenu=function () {
            return false;
        };
    </script>

　　已经阻止了右键菜单，点击无法弹出。

　　再来看一下一个阻止表单提交的实例：

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
    <script type="text/javascript">
        window.onload=function ()
        {
            var oForm=document.getElementById('form1');
            oForm.onsubmit=function ()
            {
                return false;
            };
        };
    </script>
</head>
<body>
    <form id="form1" action="http://www.miaov.com/">
        <input type="submit" />
    </form>
</body>

　　无论怎么点击提交按钮都无法提交网址。这里就有关于表单校验了。

　　3. 文本框内禁止输入内容实例（阻止onkeydown）

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
    <script type="text/javascript">
    window.onload=function ()
    {
        var oTxt=document.getElementById('txt1');
        oTxt.onkeydown=function ()
        {
            return false;
        };
    };
    </script>
</head>
<body>
    <input id="txt1" type="text" />
</body>

　　　这个实例在输入框中间无法输入字母，但是可以输入汉字（why？）

　　4. 自定义右键菜单实例

<head>
    <style type="text/css">
    * {margin:0; padding:0;}
    #ul1 {width:100px; background:#CCC; border:1px solid black; position:absolute; display:none;}
    </style>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
    <script type="text/javascript">
        document.oncontextmenu=function (ev)
        {
            var oEvent=ev||event;
            var oUl=document.getElementById('ul1');

            oUl.style.display='block';
            oUl.style.left=oEvent.clientX+'px';
            oUl.style.top=oEvent.clientY+'px';
            return false;　　　　　　　　　　　　//让系统的右键菜单消失
        };
        document.onclick=function ()
        {
            var oUl=document.getElementById('ul1');
            oUl.style.display='none';　　　　　　　　　　　　　　　　　　　　　　　　　　//点击页面就消失；
        };
    </script>
</head>
<body>
    <ul id="ul1">
        <li>登陆</li>
        <li>回到首页</li>
        <li>注销</li>
        <li>加入VIP</li>
    </ul>
</body>

　　5. 只能输入数字的输入框实例：onkeydown、onkeyup

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
    <script type="text/javascript">
        window.onload=function ()
        {
            var oTxt=document.getElementById('txt1');
            oTxt.onkeydown=function (ev)
            {
                var oEvent=ev||event;
                if(oEvent.keyCode!=8 && (oEvent.keyCode<48 || oEvent.keyCode>57))
                {
                    return false;
                }
            };
        };
    </script>
</head>
<body>
    <input id="txt1" type="text" />
</body>

 

二、拖拽

　　6. 拖拽实例：拖拽原理、三个事件、document范围、解决FF的bug


　　7. 限制拖拽范围的条件：document.documentElement.clientWidth

posted @ 2016-05-27 19:39  zzjeny  阅读(198)  评论(0)  编辑  收藏  举报