JQuery阻止(默认)事件冒泡

1.事件冒泡 

    事件冒泡就是,你在执行元素点击事件的时候同时也会触发到此元素的其前辈元素的点击事件,从而可能造成一定程度上的程序混乱现象,为了避免这种情况的出现,现在我们可以使用阻止事件冒泡

   阻止事件冒泡even.stopPropagation();//不触发除本身之外的其他任何控件的事件    

      


【案例】

   定义两个div,第一个div里嵌套一个span标签,没以个div 以及span 元素都要注册点击事件,然后点击span元素,对比一下,使用阻止冒泡和没有使用阻止冒泡的效果。

JQuery阻止(默认)事件冒泡_第1张图片

    JQuery阻止(默认)事件冒泡_第2张图片

JQuery阻止(默认)事件冒泡_第3张图片JQuery阻止(默认)事件冒泡_第4张图片

运行结果:未使用阻止冒泡

JQuery阻止(默认)事件冒泡_第5张图片

使用阻止冒泡:

JQuery阻止(默认)事件冒泡_第6张图片


  (2.)阻止事件默认冒泡 event.preventDefault();//阻止默认事件行为的触发 

  【案例】:

使用编写一个简易登陆页面form标签,设置action 跳转页面,判断用户名是否为空,不为空则跳转,为空泽提示信息。

JQuery阻止(默认)事件冒泡_第7张图片

JQuery阻止(默认)事件冒泡_第8张图片

JQuery阻止(默认)事件冒泡_第9张图片

运行结果:未使用阻止默认冒泡


使用之后

JQuery阻止(默认)事件冒泡_第10张图片

   这两个都可以使用 return false 代替。

你可能感兴趣的:(JQuery)