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()
    
          })
    
        })
  • 相关阅读:
    图象处理算法(一)
    使用自定义类实现工程多语言
    SQL的数据类型
    SQL LEFT JOIN
    TADOCommand
    如何获得活动的数据
    TDateTime
    类定义(一)
    mxOutlookBar组件安装和使用
    TADOQuery
  • 原文地址:https://www.cnblogs.com/johnhery/p/9863842.html
Copyright © 2011-2022 走看看