阻止默认行为

最新推荐文章于 2024-05-12 21:38:39 发布

夏虫语冰彡

最新推荐文章于 2024-05-12 21:38:39 发布

阅读量484

点赞数

文章标签：阻止默认行为事件对象事件源简化语句 innerHTML

本文链接：https://blog.csdn.net/qq_34283987/article/details/78005498

版权

默认行为

例如：a链接标签的默认行为是跳转，提交按钮的默认行为是提交，阻止默认行为即在默认行为发生之前与用户交互，获得用户的选择后，选择进行何种行为。

不同浏览器的阻止默认行为的方式、代码：
IE: event.returnValue = false;
FF: e.preventDefault();
两个浏览器兼容代码：return false;

示例代码：

阻止表单提交：
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script type="text/javascript">
            function login () {
                var flag = confirm("确认提交吗？");
                if (flag) {
                    //默认，什么也不做
                } else{
                    //阻止表单提交的默认行为

                    //对IE11无效
//                  if(document.attachEvent){
//                      event.returnValue = false;
//                  }else{
//                      //ff
//                      e.preventDefault();
//                  } 


                    //阻止默认跳转,flag==false
                    return flag;
                }
            }
        </script>
    </head>
    <body>
        <form action="阻止超链接跳转.html" method="post" onsubmit="return login();">

            <input type="submit" value="提交"/>
        </form>
    </body>
</html>

阻止超链接跳转：
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script type="text/javascript">
            function test () {
                var flag = confirm("确认跳转百度吗？");
                if (flag) {
                    //默认，什么也不做
                } else{
                    //阻止默认跳转

                    //对IE11无效
//                  if(document.attachEvent){
//                      event.returnValue = false;
//                  }else{
//                      //ff
//                      e.preventDefault();
//                  } 

                    return false;
                }
            }
        </script>
    </head>
    <body>
        <a href="http://www.baidu.com" onclick="return test();">跳转百度</a>
    </body>
</html>

阻止弹出右键菜单：
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script type="text/javascript">
            window.onload = function () {
                document.oncontextmenu = function (e) {
                    //阻止默认
                    //对IE11无效
//                  if(document.attachEvent){
//                      event.returnValue = false;
//                  }else{
//                      //ff
//                      e.preventDefault();
//                  } 

                    return false;
                }
            }
        </script>
    </head>
    <body>
        默认显示内容  
    </body>
</html>

事件对象

事件对象：对当前事件的一个具体描述，封装到事件对象中，类似于异常对象。

一、xhtml绑定方式
1.IE 单击产生一个隐式创建对象event，他是全局变量，可以访问，通过window.event 或 event 访问。
2.FF 火狐并不会隐式创建对象，需要主动传入一个event,形参最好用e 表示，（因为IE兼容问题，如果起成event，使用IE打开就冲突了）
示例代码：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script type="text/javascript">
            function test (e) {
                var eventObject = getEventObject(e);
                alert(eventObject);
            }

            function getEventObject (e) {
                var eventObject = null;

                if(document.attachEvent){
                    eventObject = event;
                }else{
                    eventObject = e;
                }

                return eventObject;
            }
        </script>
    </head>
    <body>
        <input type="button" name="btn1" id="btn1" value="单击事件(IE或FF)" onclick="test(event);"/>
        <!--<input type="button" name="btn2" id="btn2" value="单击事件(FF)" onclick="return test2(e);"/>-->
    </body>
</html>

二、dom绑定方式
1.IE 和上一种xhtml绑定方式的相同。
2.FF也会隐式创建事件对象，只不过这个事件对象不是全局变量，作为事件处理函数的第一个参数传递过来的。

示例代码：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script type="text/javascript">
            function test (e) {
                var eventObject = getEventObject(e);
                alert(eventObject);
            }

            function getEventObject (e) {
                var eventObject = null;

//              if(document.attachEvent){
//                  eventObject = event;
//              }else{
//                  eventObject = e;
//              }

                //这样也可以做到
                eventObject = e || event;
                return eventObject;
            }

            window.onload = function () {
                //给btn1绑定事件
                var btn1 = document.getElementById("btn1");
                btn1.onclick = test;
            }
        </script>
    </head>
    <body>
        <input type="button" name="btn1" id="btn1" value="事件对象" />
    </body>
</html>

事件源：
①(IE)eventSource = event.srcElement;
（FF） eventSource = e.target;
②兼容：var eventSource = e.srcElement || e.target;

三、this

在普通函数中，指向window对象，例：this.a 等于 window.a 等于 a
用在事件处理函数中，指向的是事件源，例：test(this);
用在对象、自定义类中，指向当前对象。

简化语句：
以 $作为方法命名的开头，类似于jQuery，例：function$ id(){
return document.getElementById(“id”);
}

innerHTML和innerText的区别：
区别1：innnerHTML 内部的HTML代码段，包括文本和标签。
innerText 内部的文本，只包含文本，不包含标签。
区别2：innerHTML 浏览器兼容。
innerText 只有IE可以用，FF不支持，
火狐如果想获得内部的文本，需要使用textContent属性。
//兼容性代码：var msg = div.innerHTML || div.textContent;

另外：outerHTML包括div标签自己以及内部的HTML代码，outerText和innerText效果一样。

这里写图片描述