精华内容
下载资源
问答
  • 冒泡事件

    2017-07-13 10:36:49
    事件冒泡及处理

    事件传播 :冒泡 和捕获 
    默认是冒泡 如果想将其转化为捕获可以就将其usecapture参数的值设置为true;

    1阻止普通事件的传播 
    event.preventDefault( );
    2.阻止冒泡事件的传播  从被点击的元素一直到根节点

    event.stopPropagation( )



    事件冒泡:例如这样一个结构 :<li><a></a></li>,假如你在a标签上绑定了一个点击click事件,如:$("a").click(function(){alert("a"); }); 还在li标签上绑定了一个事件,如:$("li").click(function(){alert("li"); });  如果不加e.preventDefault();这一语句,结果会在alert("a");执行后再次执行alert("li")语句,因为a标签在li标签中,a标签在li标签范围中,在执行a标签上的事件后会执行li标签上的相同类型事件,从内层标签往外层依次执行相同类型事件,从里面往外面,此为冒泡。



    <li style="width: 200px;height: 200px;background: red;"><a style="display: inline-block; width: 100px;height: 100px;background: blue;" href=""></a></li>

    $('li').click(function(){
        alert(1)
        })
         $('a').click(function(){
        alert(2)
        e.preventDefault();//不加这个话会冒泡到它的上级触发上级;li的点击事件
        })

    展开全文
  • 冒泡事件和非冒泡事件其实很简单,首先通俗的了解一下冒泡的大致意思。 平时大家烧热水的过程中应该都看到过冒泡的现象,就是最底层不断冒出水泡,并且上升到水面的过程。 那么在微信小程序中: 冒泡事件:就是说...

    冒泡事件和非冒泡事件其实很简单,首先通俗的了解一下冒泡的大致意思。
    平时大家烧热水的过程中应该都看到过冒泡的现象,就是最底层不断冒出水泡,并且上升到水面的过程。

    那么在微信小程序中:
    冒泡事件:就是说事件可以向上进行传递,也就是说在事件被触发之后,向他的父节点进行传递。
    非冒泡事件:就是说事件不可以向上进行传递,也就是说在事件被触发之后,不会向他的父节点进行传递。

    冒泡事件包括:touchstart,touchmove,touchcancel,touchend,tap,longtap等。
    在绑定事件的时候,要在事件前加上bind或者catch,例如bindtap或catchtap。
    而bind和catch的区别在于bind不会阻止冒泡事件向上冒泡,而catch会阻止冒泡事件向上冒泡。所以如果想要阻止冒泡事件向上进行传递,可以将bindtap改为catchtap,这样就会阻止事件冒泡。

    展开全文
  • 冒泡事件和非冒泡事件 事件分为冒泡事件和非冒泡事件冒泡事件:当一个组件上的事件被触发后,该事件会向父节点传递。 非冒泡事件:当一个组件上的事件被触发后,该事件不会向父节点传递。 普通事件绑定 事件绑定...

    冒泡事件和非冒泡事件

    事件分为冒泡事件和非冒泡事件:

    冒泡事件:当一个组件上的事件被触发后,该事件会向父节点传递。
    非冒泡事件:当一个组件上的事件被触发后,该事件不会向父节点传递。

    普通事件绑定
    事件绑定的写法类似于组件的属性,如:

    <view bindtap="handleTap">
        Click here!
    </view>
    

    如果用户点击这个 view ,则页面的 handleTap 会被调用。

    事件绑定函数可以是一个数据绑定,如:

    <view bindtap="{{ handlerName }}">
        Click here!
    </view>
    

    此时,页面的 this.data.handlerName 必须是一个字符串,指定事件处理函数名;如果它是个空字符串,则这个绑定会失效

    绑定并阻止事件冒泡
    除 bind 外,也可以用 catch 来绑定事件。与 bind 不同, catch 会阻止事件向上冒泡。

    例如在下边这个例子中,点击 inner view 会先后调用handleTap3和handleTap2(因为tap事件会冒泡到 middle view,而 middle view 阻止了 tap 事件冒泡,不再向父节点传递),点击 middle view 会触发handleTap2,点击 outer view 会触发handleTap1。

    <view id="outer" bindtap="handleTap1">
      outer view
      <view id="middle" catchtap="handleTap2">
        middle view
        <view id="inner" bindtap="handleTap3">
          inner view
        </view>
      </view>
    </view>
    互斥事件绑定
    
    展开全文
  • 主要介绍了JS冒泡事件与事件捕获,结合实例形式分析了javascript冒泡的原理与阻止冒泡的相关操作技巧,需要的朋友可以参考下
  • 冒泡事件 js中“冒泡事件(bubble)”并不是能实际使用的花哨技巧,它是一种对js事件执行顺序的机制,“冒泡算法”在编程里是一个经典问题,冒泡算法里面的“冒泡”应该说是交换更加准确;js里面的“冒泡事件”才是...
  • 本文实例讲述了JavaScript捕捉事件和阻止冒泡事件。分享给大家供大家参考,具体如下: 今日,项目程序出现异常,后发现跟冒泡事件有关,利用此机会探索一下利用Javascript捕获和冒泡事件。 一、要探究捕获和冒泡事件...
  • 在微信小程序的事件分为冒泡事件和非冒泡事件冒泡事件:当一个组件上的事件被触发后,该事件会向父节点传递。 非冒泡事件:当一个组件上的事件被触发后,该事件不会向父节点传递。 WXML的冒泡事件列表: ...
  • WXML的冒泡事件列表: 语法:最前面加bind关键词。 事件 说明 touchstart 手指触摸动作开始 touchmove 手指触摸后移动 touchcancel 手指触摸动作被打断,如来电提醒,弹窗 touchend 手指触摸动作结束 ...

    WXML的冒泡事件列表:

    语法:最前面加bind关键词。

    事件说明
    touchstart手指触摸动作开始
    touchmove手指触摸后移动
    touchcancel手指触摸动作被打断,如来电提醒,弹窗
    touchend手指触摸动作结束
    tap手指触摸后马上离开
    longpress手指触摸后,超过350ms再离开,如果指定了事件回调函数并触发了这个事件,tap事件将不被触发
    longtap手指触摸后,超过350ms再离开(推荐使用longpress事件代替)
    transitionend会在 WXSS transition 或 wx.createAnimation 动画结束后触发
    animationstart会在一个 WXSS animation 动画开始时触发
    animationiteration会在一个 WXSS animation 一次迭代结束时触发
    animationend会在一个 WXSS animation 动画完成时触发
    touchforcechange在支持 3D Touch 的 iPhone 设备,重按时会触发

    说明:以上都是冒泡事件,除此之外的都属于非冒泡事件。

    非冒泡事件:

    catch 会阻止事件向上冒泡。
    语法:将bind关键词改成catch关键词。

    展开全文
  • 捕获事件与冒泡事件

    2019-06-10 22:27:52
    如何区分捕获事件与冒泡事件 捕获事件从外向里触发事件 冒泡事件从里向外触发事件 捕获事件与冒泡事件先手顺序 先捕获在冒泡 如果有注册事件 按照注册顺序addeventlistener() 如何阻止冒泡与阻止默认事件 ...
  • 小程序中的时间分为两种,冒泡时间和非冒泡事件。例如bindtap和catchtap在事件相应上有区别: 对于bindtap而言:子元素响应时间,父元素也会跟着响应。为冒泡。 对于catchtap而言,并不冒泡,子元素响应时间父...
  • js 冒泡事件

    千次阅读 2018-07-28 10:33:24
    冒泡事件相信很多人多听过,但是具体什么是冒泡事件,有些人估计还是不太清楚! 我在这里简单的说明一下: 冒泡事件:事件从事件目标(target)开始,往上冒泡直到页面的最上一级标签。 来个例子吧,这样清晰一点:...
  • 在javascript的dom操作做肯定会遇到js的冒泡事件,最常见的是div弹窗事件如图解 当点击灰色部分是弹窗消失,点击黑色部分时没有效果。 通过下面一段代码来分析js的冒泡事件 html代码: 代码如下: <!DOCTYPE ...
  • 主要介绍了JS阻止冒泡事件以及默认事件发生的简单方法,有需要的朋友可以参考一下
  • 如果某元素定义了事件A,如click事件,如果触发了事件之后,没有阻止冒泡事件,那么事件将向父级元素传播
  • 冒泡事件的处理方法

    2016-01-09 09:43:14
    冒泡事件的处理,做网页的时候经常会出现冒泡事件,这是一个简单的冒泡事件处理方法
  • 一、冒泡事件简介 当我们点击一个控件的时候,如果包括这个控件的父控件也有click事件,则会继续执行。比如:div下的a都有click事件,点击a的时候,会alert出现2次。这个现象叫做冒泡事件。 这个事件从原始元素开始...
  • 主要介绍了Jquery使我们简化了禁止冒泡事件的操作,只需几行代码,需要的朋友可以参考下
  • 主要是对JS冒泡事件的快速解决方法进行了详细的分析介绍,需要的朋友可以过来参考下,希望对大家有所帮助
  • js冒泡事件测试

    2013-04-15 11:14:41
    关于冒泡事件的demo,教你实现js的冒泡处理,适用于各种浏览器
  • 下面小编就为大家带来一篇深入理解jQuery之防止冒泡事件。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
  • jquery之防止冒泡事件冒泡事件就是点击子节点,会向上触发父节点,祖先节点的点击事件
  • 本文实例讲述了微信小程序冒泡事件及其阻止方法。分享给大家供大家参考,具体如下: 事件的类别分为几种: 点击事件:tap 长按事件:longtap 触摸事件:touchstart; touchend;touchcancel;touchmove 其他:...
  • 1. 阻止冒泡事件 主要是用于阻止事件传播。阻止它被分派到其他的DOM节点上,在事件传播的任何阶段都能使用。使用方法如下(兼容IE): function stopBubble(event){ if(window.event){//兼容IE window.event....

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 88,865
精华内容 35,546
关键字:

冒泡事件