美文网首页前端基础知识记录
JS事件中的冒泡和默认行为

JS事件中的冒泡和默认行为

作者: 大写的Q | 来源:发表于2017-03-12 22:43 被阅读64次

    写程序的时候遇到问题去搜索,有时候会看到 preventDefault()和stopPropagation()两种代码。几乎所有的文章作者则解释为:阻止默认行为/冒泡行为。但是这两句代码一直让我困惑了很久,什么算是默认行为?这两种代码有什么区别?所以这篇文章里,就算是自己研究后的一篇总结。

    首先,要先了解什么是默认行为。

    js中事件有自己的默认行为,例如,点击a标签就会跳转,点击表单提交则会提交,单击右键就会出现菜单。有些时候需要取消这些事件的默认行为,就用到了event.preventDefault(), 对于老的IE浏览器,则为event.returnValue = false; 但是当事件本身没有默认行为,即event.cancelable=false时,阻止是不会起作用的。

    什么是冒泡行为呢?

    即在某个对象上触发某个事件,事件会从发生的目标event.target开始依次向上一级标签寻找,直到document。要取消冒泡行为则用event.stopPropagation(), IE则用event.cancelBubble = true; 阻止后则只会触发自身的事件,不会再向上一级寻找。

    不是所有的事件都能冒泡。如focus, blur等,这些事件仅发生在自己身上,父元素不会产生该事件。

    如果想要同时阻止事件默认行为和冒泡行为,可以在事件函数中返回false来表示调用preventDefault()和stopPropagation()两个方法。

    如:

     $(":submit").click(function(event) {

        if($(".input").val() =="") {

             alert("用户名不能为空");

            return  false; //阻止提交按钮的默认行为(提交表单)和事件冒泡

        }

    })

    以上~

    参考:

    1. http://www.jb51.net/article/42492.htm

    2. http://blog.csdn.net/dzahao/article/details/52809818

    相关文章

      网友评论

        本文标题:JS事件中的冒泡和默认行为

        本文链接:https://www.haomeiwen.com/subject/ezyagttx.html