zoukankan      html  css  js  c++  java
  • javascript, jQuery阻止默认事件和冒泡事件

    事件冒泡(event bubbling)

      事件冒泡是指一个元素上的事件被触发,然后这个事件按嵌套顺序在父级元素上触发,直至document根节点。

      例如:

    <!DOCTYPE html> 
        <html> 
        <head> 
          <title>Event Bubbling Example</title> 
        </head> 
        <body> 
          <div id="myDiv">Click Me</div> 
        </body> 
        </html>

    如果单击了页面中的<div>元素,那么事件会按以下顺序传播:

      <div> --> <body> --> <html> --> document

      也就是说,click 事件首先在<div>元素上发生,这个元素就是被点击的元素。然后,click事件沿着DOM树向上传播,在每一级节点上都会发生,直至document对象。

      下图展示了事件冒泡的过程:

                       

      js阻止事件冒泡

          var div = document.getElementById("myDiv")
    
          div.onclick = function(event) {
    
            event.stopPropagation() 
    
            // 或者直接使用return false,即阻止了事件冒泡也阻止了默认事件
    
            // return false
    
          }

      js阻止默认事件

        1.通过on这种方式的绑定的事件,使用return false:

     

    var div = document.getElementById("myDiv")
    
          div.onclick = function(event) { 
    
            return false //使用return false,即阻止了事件冒泡也阻止了默认事件
    
          }

    Listener绑定的,使用evevt.preventDefault():

          var div = document.getElementById("myDiv")
    
          div.addEventListener( " click ",  function(event) { 
    
            event.preventDefault()
    
          })
      //jQuery阻止事件冒泡和默认事件
    
        //阻止事件冒泡:
    
        $(document).ready(function() {
    
          $('#myDiv').click( function(event) {
    
            event.stopPropagation()
    
          })
    
        })
    
        //阻止默认事件:
    
        $(document).ready(function() {
    
          $('#myDiv').click( function(event) {
    
            event.preventDefault()
    
          })
    
        })
  • 相关阅读:
    silverlight与CSLA的快速应用01序
    oracle常用的时间格式转换
    实现打印从数字1到5,非常规方法
    Java学习笔记之数据结构中的树
    Java探究心得之三元运算符
    Java学习心得之各种小算法
    深入Java核心 Java内存分配原理(转)
    java中继承与初始化顺序
    jsp 获取表单传过来的参数值含有中文字符
    转:父类私有变量是否被子类继承详细解说(答案:内存中存在,但sun公司定义为不继承)
  • 原文地址:https://www.cnblogs.com/johnhery/p/9863842.html
Copyright © 2011-2022 走看看